使用自定义指令使用ng-repeat显示2个不同的表

Question

我有一个自定义指令（生成一个表），它在我的索引页面上重复两次。表的值通过$ 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']);            
        }
    };
})

另一个生成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;
            });
        }
    };
})

globalrows array

Answer 1

目前您的指令没有创建任何子范围，基本上它在页面之间共享相同的范围。当您更新表中的数据时，它会更新两个地方的数据。

通过具有scope: { ... }等隔离范围来创建指令，以便每个指令都可以作为单独的组件使用。将数据传递给隔离范围属性的指令。这里data1＆amp; data2是动态表数据值，将由指令的使用者提供。在您的情况下，您可以做的是，您应该从指令controller中取出服务电话，因为它会使您的指令更紧密地联系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 = [];
            }
        }
    };
})

模板：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>

Plunkr Here