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

发布时间: 2017/4/16 21:01:37
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个自定义的指令 (即生成表) 重复两次我的索引页。通过 $scope.globalrows 的变量填充表的值。尽管 globalrows 包含 2 的数组值,它总是打印第二个值。如何修改我的模板或指示的方式显示值独有的那张桌子和防止覆盖的内容。

问题︰ 表重复两次与 globalarray 中的第二个表内容。第二个表覆盖第一个表见

index.html

<grid-print section="1"></grid-print>
<grid-print section="2"></grid-print>

模板︰ 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']);            
        }
    };
})

生成行,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 数组

globalrows array datastructure

解决方法 1:

目前你的指令并没有创建任何子范围,基本上它共享同一范围之间的页。当您更新数据两个表,它是数据和更新对这两个地方。

创建指令由因为孤立像范围 scope: { ... } ,以便每个指令将作为单独的组件工作 & 将数据传递到指令,从隔离的范围的属性。在这里 data1 & 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 这里

赞助商