观看HTML属性的角度变化

Question

我正在研究Bootstrap手风琴，有3个部分。 我需要基于html属性更改来更改类。 有什么办法可以检查'aria-expanded'属性值并应用于ng-class

<a class="collapsed" aria-expanded="true" >
    My Open Tasks <i class="fa fa-sort-asc pull-right" ng-class="aria-expanded? 'fa-sort-desc' : 'fa-sort-asc'"></i>
</a>
<a class="collapsed" aria-expanded="false" >
    My Open Tasks 2 <i class="fa fa-sort-asc pull-right" ng-class="aria-expanded? 'fa-sort-desc' : 'fa-sort-asc'"></i>
</a>
<a class="collapsed" aria-expanded="false" >
    My Open Tasks 3 <i class="fa fa-sort-asc pull-right" ng-class="aria-expanded? 'fa-sort-desc' : 'fa-sort-asc'"></i>
</a>

Answer 1

尝试这个。 这是一个自定义指令，当您将其添加到元素中时，它将检查该元素并监视该指令。

angular.directive("ariaCheck", function(){
        return {
           restrict: "A",
           link: function(scope, element, attributes){
                      scope.$watch(function() {return element.attr('aria-expanded'); }, function(){
                      if(attributes.ariaExpanded){
                          element.addClass("some-class");
                       }
                    }
                 }   
           }
});

然后在您的html中添加指令...

<a aria-check class="collapsed"  role="button" data-toggle="collapse" data-parent="#accordion" href="#myopentasks" aria-expanded="true" aria-controls="collapseOne" >
                    My Open Tasks <i class="fa fa-sort-asc pull-right" ng-class="aria-expanded? 'fa-sort-desc' : 'fa-sort-asc'"></i>
                </a>

Answer 2

实现它的角度方法是对该属性使用2种方式绑定：

angular.directive("ariaCheck", function () {
  return {
      restrict: "A",
      scope: {
         ariaExpanded: "="
      },
      link: function (scope) {
          //some logic to set ariaExpanded to false
          scope.ariaExpanded = false;
      }
  }
});

标记：

  <a class="collapsed" aria-expanded="true" >
    My Open Tasks 
    <i class="fa fa-sort-asc pull-right" ng-class="{'fa-sort-desc': ariaExpanded, 'fa-sort-asc': !ariaExpanded}"></i>                        
  </a>

确保ariaExpanded为：在指令的逻辑内进行了更改。 如果您需要聆听外界的变化，则可能需要更复杂的解决方案。