Question

HY，

我在我的应用程序中创建了一个简单使用表的指令。我正努力让ng-repeat工作。问题是我的指令会告诉表格它将从哪个控制器获取带有ng-repeat数据的列表，这似乎不起作用，我可以使用另一个指令来创建ng-repeat但我不想要改变开发人员使用angular指令的方式。

因此，如果有人已经在努力解决这个问题，请分享您的解决方法。

这是标记。

<body ng-app="List">
<div my-table pl-emptytext="No data found!">
  <table>
    <thead>
      <tr>
        <th pl-sort="Id"> Id </th>
        <th pl-sort="Name"> Name </th>
        <th pl-sort="Roles"> Roles </th>
        <th pl-sort="Claims"> Claims </th>
      </tr>
    </thead>
    <tbody>
      <tr pl-obj="user">
        <td>{{user.Id}}</td>
        <td>{{user.Name}}</td>
        <td>
          <span ng-repeat="role in user.Roles">
            {{role.RoleType}}
          </span>
        </td>
        <td>
          <span ng-repeat="claim in user.Claims">
            {{role.ClaimType}}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</body>

这是指令myTable

angular
.module('List')
.directive('myTable', [
  '$compile',
  function($compile) {
    return {
      restriction: 'AE',
      scope: {
        plEmptytext: '@'
      },
      transclude: true,
      replace: true,
      template: '<div class="container-fluid">' +
        '<div class="row">' +
        '<div class="col-lg-12">' +
        '<div class="alert alert-warning" ng-cloak ng-show="ListIsEmpty">' +
        '{{plEmptytext}}' +
        '</div>' +
        '<div ng-transclude></div>' +
        '</div>' +
        '</div>' +
        '</div>',
      link: function(scope, element) {
        // Do something else, bind events, etc ...

        var table = element.find('table');
        $compile(table)(scope);
      }
    };
  }
])
.directive('table', [
  function() {
    return {
      link: function(scope, element, attrs) {
        attrs.$addClass("table");
        attrs.$addClass("table-striped");
      }
    };
  }
])
.directive('thead', [
  function() {
    return {
      link: function(scope, element, attrs) {
      }
    };
  }
])
.directive('th', [
  function() {
    return {
      link: function(scope, element, attrs) {
        if (attrs.plSort) {
          attrs.$set("ngClick", "resort('" + attrs.plSort + "')");
        }
      }
    };
  }
])
.directive('tbody', [
  function() {
    return {
      link: function(scope, element, attrs) {
        attrs.$set("ng-controller", "listCtrl");

      }
    };
  }
])
.directive('tr', [
  function() {
    return {
      link: function(scope, element, attrs) {
        if (attrs.plObj) {
          attrs.$set("ngRepeat", attrs.plObj + " in List");

        }
      }
    };
  }
]);

这就是listCtrl

angular.module('List', [])
.controller('listCtrl', ['$scope', '$timeout',
  function($scope, $timeout) {
    $timeout(function() {
      $scope.List = [{
        Id: '1',
        Name: 'teste1',
        Roles: [{
          Id: 1,
          RoleType: '1'
        }, {
          Id: 2,
          RoleType: '2'
        }],
        Claims: [{
          Id: 1,
          CalimType: '1'
        }, {
          Id: 2,
          ClaimType: '2'
        }]
      }, {
        Id: '1',
        Name: 'teste1',
        Roles: [{
          Id: 2,
          RoleType: '2'
        }],
        Claims: [{
          Id: 2,
          ClaimType: '2'
        }]
      }];
    }, 1000)
  }
]);

问题是当我尝试在这个2 td上调用ng-repeat时它不能正常工作

<td>
  <span ng-repeat="role in user.Roles">
    {{role.RoleType}}
  </span>
</td>
<td>
  <span ng-repeat="claim in user.Claims">
    {{role.ClaimType}}
  </span>
</td>

任何人都可以指出我的问题方向？已经从不同的人那里寻找不同的东西和不同的解决方案，但似乎没有人面对我的问题。

最佳，

Plunker

Answer 1

首先，您的pl-obj指令实际上只是ng-repeat。因此，请使用<tr ng-repeat="user in List">。

其次，您的控制器似乎没有被连接起来。你试图使用一个奇怪的指令来连接它，但是你可能会以Angular不理解的方式进行连接（attrs对象的属性是camelCased，而不是连字符）。只需在ng-controller元素上使用table属性：<table ng-controller="listCtrl">。

一旦您以这种方式使用更多标准Angular，我希望您的问题更容易排除故障。

编辑：这是一个带有我推荐的更改的Plunker（以及一些更正的拼写错误）。 https://plnkr.co/edit/iEEtBycevB3Wh6eHFEAI?p=preview。似乎现在工作正常。

编辑2：如果你想为所有<tbody>使用相同的控制器（我不推荐这个，但你可以这样做），在你的指令中使用它：

function() {
  return {
    controller: 'listCtrl',
    ...
  };
}

角度表指令ng-repeat

1 个答案: