I'm facing an issue with a custom directive that generates tables and is appearing twice on my index page. The data for these tables comes from the $scope.globalrows variable. Even though globalrows contains 2 arrays, it always displays the second array's values. I need to find a way to modify either my template or directives so that each table shows unique values without overwriting each other's contents.
Problem: Both tables are showing up but with the same content from the second table, leading to an overwrite of the first table.
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:
.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']);
}
};
})
Another directive that generates rows, cols:
.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;
});
}
};
})