觀看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為：在指令的邏輯內進行了更改。 如果您需要聆聽外界的變化，則可能需要更復雜的解決方案。