javascript - 无法从指令中选择 ngClass 元素

Question

我使用 angularjs ng-class directive 使用 ng-if 添加类，并且我使用另一个module 指令用这个类名对这个元素做一些事情，但在运行时它不起作用指令无法找到具有这个类名的元素，当我硬编码它的类名时，它的工作，但从 ng-class 注入(inject)的类名不起作用。

<!-- 'A' not picking by directive -->
<div ng-class="{'myclass': item.isTrue}" ng-repeat="item in vm.list">...</div>

<-- 'B' working -->
<div class="myclass" ng-repeat="item in vm.list">...</div>

指令。

var tmp = $element[0].getElementsByClassName("myclass"); // not working with 'A' but fine  with 'B'

Answer 1

我猜 directive 调用的 ng-class 有问题。此外，class 类型的指令使用较少，因为总是可以实现与 attribute 和 element 相同的效果。

我创建了一个demo ，如何使用 ng-if 调用 attribute 类型和 class 的 directive 来实现相同的效果:

1. Using it as Attribute

<div ng-repeat="item in data">
    <div>
      {{item.name}}
      <span ng-if="item.isTrue" myclass></span>
    </div>
</div>

2. Using it as Class

<div ng-repeat="item in data">
    <div>
      {{item.name}}
      <span ng-if="item.isTrue" class="myclass">
      </span>
    </div>
</div>    

两者的 JS 共同点如下:

$scope.data = [{
    'id': 0,
    'name': 'Name 1',
    'isTrue': false
  }, {
    'id': 1,
    'name': 'Name 2',
    'isTrue': true
  }, {
    'id': 2,
    'name': 'Name 3',
    'isTrue': true
  }, {
    'id': 3,
    'name': 'Name 4',
    'isTrue': false
}];