我有一个自定义指令(生成一个表),在我的索引页面上重复两次.表的值通过$scope.globalrows变量填充.即使globalrows包含2个数组值,它也始终打印第二个值.如何修改模板或指令以显示该表的唯一值,并防止覆盖内容.
问题:
表格在globalarray中与第二个表格内容重复两次.我看到第二个表正在覆盖第一个表.
的index.html
<grid-print section="1"></grid-print>
<grid-print section="2"></grid-print>
template:print.dir.html
<form class="form-horizontal clearfix">
<table class="grid table table-bordered">
<thead>
<tr>
<th ng-repeat="col in cols">{{col.title}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in globalrows track by $index" index={{index}}>
<td ng-repeat="col in cols">
<span>{{ row[col.field] }}</span>
</td>
</tr>
</tbody>
</table>
</form>
指示:
.directive("gridPrint", function($sessionStorage, dataservice) {
return {
restrict: 'E',
templateUrl: "components/print/templates/print.dir.html",
replace: true,
controller: function($scope, $state, $attrs) {
//array of the items that are to be displayed on the 2 tables
$scope.globalrows = dataservice.getCollectionData();
},
link: function(scope, element, attributes){
// console.log("in grid print"+attributes['section']);
}
};
})
另一个生成行,列的指令:
.directive("grid", function() {
return {
restrict: 'E',
templateUrl: "components/section/directives/section.shared.dir.html",
replace: true,
controller: function($scope) {
$scope.$on('ready-to-render', function(e, rows, cols) {
// console.log(rows, cols);
$scope.globalrows.rows = rows;
$scope.cols = cols;
});
}
};
})
globalrows数组
最佳答案 目前你的指令没有创建任何子范围,基本上它在页面之间共享相同的范围.当您更新表中的数据时,它会更新两个地方的数据.
通过像scope:{…}这样的隔离范围创建一个指令,这样每个指令都可以作为单独的组件使用.将数据传递给隔离范围属性的指令.数据1& data2是动态表数据值,将由指令的使用者提供.在你的情况下你可以做的是,你应该从指令控制器中取出服务调用,因为它会使你的指令更紧密地耦合Component.而是将其移出并放置在指令元素所在的父控制器中.
标记
<grid-print section="1" columns="cols" table-data="data1"></grid-print>
<grid-print section="2" columns="cols" table-data="data2"></grid-print>
调节器
// If its simple hardcoded data arriving from method then use below
// $scope.globalrows = dataservice.getCollectionData();
// $scope.data1 = $scope.globalrows[0];
// $scope.data2 = $scope.globalrows[1];
// If data is comming from promise, the do following thing.
dataservice.getCollectionData().then(function(data){
$scope.globalrows = data;
$scope.data1 = $scope.globalrows[0];
$scope.data2 = $scope.globalrows[1];
});
$scope.cols = $scope.columns; //this would be array of columns.
指示
.directive("gridPrint", function($sessionStorage, dataservice) {
return {
restrict: 'E',
templateUrl: "components/print/templates/print.dir.html",
replace: true,
scope: {
tableData: '=', //table data will set by directive consumer
columns: '=' // no need for named attributes
},
link: function(scope, element, attributes){
// do DOM manipulation here if required.
}
controller: function($scope) {
// It's possible the data is not filled yet, because you gain the data from a service (which is asynchronous),
//so just initialize with empty array
if(angular.isUndefined($scope.tableData)){
$scope.tableData = [];
}
if(angular.isUndefined($scope.columns)){
$scope.columns = [];
}
}
};
})
template:print.dir.html
<form class="form-horizontal clearfix">
<table class="grid table table-bordered">
<thead>
<tr>
<th ng-repeat="col in columns">{{col.title}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in tableData track by $index" index={{index}}>
<td ng-repeat="col in columns">
<span>{{ row[col.field] }}</span>
</td>
</tr>
</tbody>
</table>
</form>