无法从指令中选择 ngClass 元素

【问题标题】：Cannot select ngClass element from directive无法从指令中选择 ngClass 元素
【发布时间】：2023-03-22 04:10:01
【问题描述】：

我正在使用angularjs ng-class directive 添加带有ng-if 的类，并且我使用另一个模块指令对具有此类名称的此元素执行某些操作，但在运行时它不起作用指令找不到该元素使用这个类名，当我对类名进行硬编码时，它的工作，但从 ng-class 注入的类名不起作用。

<!-- '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'

【问题讨论】：

你的item.IsTrue是否返回true
是编译后的代码显示类名
你能把整个指令的代码贴出来吗？
这是github上的指令代码github.com/Poordeveloper/ion-sticky

标签： javascript angularjs directive ng-class

【解决方案1】：

我猜ng-class 的directive 调用存在问题。此外，class 类型的指令使用频率较低，因为总是可以达到与 attribute 和 element 相同的效果。

我创建了一个demo，如何使用ng-if 我调用attribute 和class 类型的directive 来实现它：

将其用作属性

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

将其用作类

<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
}];

【讨论】：