无法从指令中选择ngClass元素

Question

Im using angularjs ng-class directive to add class with ng-if , and Im using another modules directive to do something with this element with this class name, but on runtime it's not working directive cannot find the element with this class name, when i hard code the class name its working, but from ng-class injected class name not working.

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

Directive.

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

Answer 1

I guess there's an issue with the ng-class of the directive call. Also, the directive of type class is used less often as one can always the achieve the same with that of the attribute and element .

I have created a demo , how one can achieve using the same using ng-if my invoking the directive of type attribute and class :

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>    

The JS for both of them is common as below:

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