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

2019年7月27日 177次阅读

我有一个自定义指令(生成一个表),在我的索引页面上重复两次.表的值通过$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数组

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

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

通过像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>

Plunkr Here

点赞