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

【问题标题】：ng-class is not applied on element with ng-repeatng-class 不适用于具有 ng-repeat 的元素
【发布时间】：2017-05-29 17:15:39
【问题描述】：

我有以下自定义指令：

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 的元素？

【问题讨论】：

你确定你找对地方了吗？第一行设置 td 上的类。下一个在 tr 上设置类。
@JB Nizet：很好，我错过了。我修复了我的帖子以确保两个 ng-class 语句都在 <tr> 元素上。我在我的模板中进行了相同的更改，但遗憾的是问题仍然存在：ng-class 在其自己的作品中，与 ng-repeat 结合没有。

标签： angularjs angularjs-directive angularjs-ng-repeat angularjs-ng-class

【解决方案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）和那里的答案（使用'

 (getInterfaces())

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

【讨论】：