jQuery Lite/AngularJS：如何將一個類添加到元素的單個子元素？

Question

我想添加一個活動的類到使用AngularJS的jQuery Lite庫的元素，我遇到了麻煩。

我希望我可以做這樣的事情但是element.children()[index].addClass('active');，返回以下錯誤：

TypeError: element.children(...)[index].addClass is not a function

有沒有一種方法來添加一個類元素的一個孩子？

(function() { 

'use strict'; 

angular 
    .module('rugapp') 
    .directive('menu', menu); 

    menu.$inject = ['$location']; 

    function menu($location) { 
     return { 
     restrict: 'A', 
     link: link 
     }; 

     function link(scope, element) { 

     scope.$on('$routeChangeSuccess', function() { 
      angular.forEach(element.children(), function(link, index) { 
      if (link.hash.replace('#', '') === $location.path()) { 
       console.log("Make " + $location.path() + " active!!!"); 
       console.log(element.children()[index]); 
       // element.children()[index].addClass('class'); 
      } 
      }); 
     }); 

     } 
    } 

})(); 

爲了完整性，該指令被應用，像這樣：

<div class="list-group" menu> 
    <a href="app/#/" class="list-group-item">Home</a> 
    <a href="app/#/link1" class="list-group-item">Link1</a> 
    <a href="app/#/link2" class="list-group-item">Link2</a> 
    .... 
</div> 

UPDATE：工作指令使用AngularJS指令添加一個 '有效' 類。

(function() { 

'use strict'; 

angular 
    .module('rugapp') 
    .directive('menu', menu); 

    menu.$inject = ['$location']; 

    function menu($location) { 
     return { 
     restrict: 'A', 
     link: link 
     }; 

     function link(scope, element) { 

     scope.$on('$routeChangeSuccess', function() { 
      angular.forEach(element.children(), function(link, index) { 
      if (link.hash.replace('#', '') === $location.path()) { 
       element.children().eq(index).addClass('active'); 
      } else { 
       element.children().eq(index).removeClass('active'); 
      } 
      }); 
     }); 

     } 
    } 

})(); 

Answer 1

答案很簡單，你想要做的這是什麼

element.children().eq(index).addClass('active'); 

需要注意的是EQ（）是從零開始。因此，選擇第一個孩子，你結束了這個

element.children().eq(0).addClass('active'); 

此處瞭解詳情：http://api.jquery.com/eq/

Answer 2

枚舉子DOM元素和發現/提取鏈接到不同的「路線」錨的想法（我假設你在這裏使用路線，雖然它並不重要）是非常易變的。別說，假設（按照您的方法建議），只有只有<a>子元素。

如果您決定使用<button>而不是？如果您有其他非菜單相關的<a>或其他造型組件，該怎麼辦？對DOM的任何修改都會打破您的方法。

相反，我建議你按照什麼angular-ui did with ui-sref-active做（src）。它只適用於ui.router，顯然，這個想法是一樣的：它根據匹配的「狀態」對每個指令應用「主動」風格。

所以，你的概念解決方案是：

.directive("menuActive", function($location, $interpolate){ 
    return { 
    restrict: "A", 
    link: function(scope, element, attrs){ 

     var activeClass = $interpolate(attrs.menuActive)(scope); 

     // for simplicity of example, I assume that it only applies 
     // to <a href="url#hash">, but you could make it generic 
     if (element[0].tagName !== "A") return; 
     var link = element[0]; 

     $scope.$on("$routeChangeSuccess", function() 
     if (link.hash.replace('#', '') === $location.path()){ 
      element.addClass(activeClass); 
     } else { 
      element.removeClass(activeClass); 
     } 
    } 
    } 
}); 

和用法是：

<div class="list-group"> 
    <a href="app/#/"  menu-active="active" class="list-group-item">Home</a> 
    <a href="app/#/link1" menu-active="active" class="list-group-item">Link1</a> 
    <a href="app/#/link2" menu-active="active" class="list-group-item">Link2</a> 
    .... 
</div>