Question

我有以下自定义指令：

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>

第一个表行刚刚添加用于测试目的。它正确地具有类＆＃34;可选＆＃34;根据变量＆＃39; optional＆＃39;的值。但是，ng-repeat创建的那些表行永远不会有＆＃34; optional＆＃34;班级设定，没有垫子的价值是什么＆＃39;可选＆＃39;变量

我找到了以下文章 Angular js Custom Directive on element with ng-repeat - Can't set CSS classes 建议在我的指令中使用-1001的优先级，但是该帖子中原始代码的1001和答案中建议的-1001都不会对我的情况产生影响。

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

Answer 1

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

<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: How to pass part of my data from one component to another）和答案中偶然发现了同样的问题（使用＆＃39;＆lt;＆＃39;绑定而不是＆＃39; @＆＃39;允许我摆脱服务，因此

 (getInterfaces())

我的ng-repeat语句的一部分。

ng-class不适用于具有ng-repeat的元素

1 个答案: