0

我有以下自定义指令：

angular.module('Interfaces').directive('Interfaces', function() {
  return {
    restrict : 'A',
    scope : {
      minor : '@'
    },
    templateUrl : 'interfaces/interfaces.template.html',
    controller : [ '$scope', 'InterfacesService', function InterfaceController($scope, InterfacesService) {
      $scope.interfacesService = InterfacesService;
      $scope.label = 'Interfaces';
      $scope.optional = ($scope.minor == "true");
      if ($scope.optional) {
        $scope.label = '';
      }

      $scope.getInterfaces = function getInterfaces() {
        return $scope.interfacesService.getInterfaces($scope.minor);
      };
    } ]
  };
});

以及以下模板

<tr ng-class="{'optional': optional}"><td colspan="5">Just testing</td></tr>
<tr ng-class="{'optional': optional}" ng-repeat="interface in interfaces = (getInterfaces())" >
  <td rowspan='{{interfaces.length}}' class='label-column' ng-if="$index === 0">{{label}}</td>
  <td colspan='2' class='data'>{{interface.key}}</td>
  <td colspan='2' class='data'>{{interface.value}}</td>
</tr>

我将此指令用作表格的一部分：

<table>
  <tbody>
    <!-- other table content -->
  </tbody>
  <tbody interfaces minor="true"></tbody>
  <tbody interfaces minor="false"></tbody>
  <tbody>
    <!-- other table content -->
  </tbody>
</table>

第一个表格行只是为了测试目的而添加的。根据变量“可选”的值，它正确地具有“可选”类。但是，由 ng-repeat 创建的那些表行永远不会设置“可选”类，无论“可选”变量的值是什么。

我发现以下文章 Angular js Custom Directive on element with ng-repeat - Can't set CSS classes 这建议在我的指令中使用 -1001 的优先级，但该帖子中原始代码的 1001 和 -1001 都不是答案中的建议对我的情况有所不同。

为什么 ng-class 不应用于具有 ng-repeat 的元素？

4

1 回答 1

0

好的，在与朋友交谈后，问题似乎出在模板中的以下行：

<tr ng-class="{'optional': optional}" ng-repeat="interface in interfaces = (getInterfaces())" >

将 getInterfaces() 调用放在括号中似乎导致了无休止的迭代，从而阻止了 ng-class 的应用。我已经看到了这些错误消息，但没有将它们与我的问题联系起来。

我已经解决了以下问题：

我现在不是从 InterfacesService 检索数据，而是从外部模板将它们作为参数传递：

<tbody interfaces minor="true" interfaces="{{information.host.interfaces}}"></tbody>
<tbody interfaces minor="false" interfaces="{{information.host.interfaces}}"></tbody>

在指令中我添加了一个新的绑定：

 scope : {
      minor : '@',
      interfaces: '<'
    },

我的界面模板现在直接引用了这个新的绑定：

<tr ng-class="{'optional': optional}" ng-repeat="interface in interfaces" >

尝试从 InterfacesService 获取此信息而不是将其传递给指令的原因是我尝试过但失败了，使用该服务是一种解决方法。

我在稍微不同的设置中再次偶然发现了同样的问题（请参阅AngularJs：如何将我的部分数据从一个组件传递到另一个组件）和那里的答案（使用'<'绑定而不是'@'让我得到摆脱服务，因此

 (getInterfaces())

我的 ng-repeat 声明的一部分。

于 2017-05-29T09:15:39.140 回答