AngularJS addClass無法正常工作

Question

我一直在嘗試通過AngularJS添加class，但是代碼似乎無法正常工作，奇怪的是addClass在父菜單項上有效，但在子項上卻無效。

我有一個嵌套的UL和LI，當我單擊Parent LI時，將調用ParentLi函數，並且它向Clicked LI添加了“ focused”類，這很好用，但是當我單擊Nest LI時，我稱為childLi，我也這樣做操作與對Parent的操作相同，但未添加類。 我是Angular的新手，我希望我以正確的方式進行操作。

$scope.parentLi = function(event) {
    var liElement = angular.element(event.target.parentNode);
    var allParentLiElements = document.getElementsByClassName('parent-dropdown');
    if (!liElement.hasClass('focused')) {
        angular.element(allParentLiElements).removeClass('focused');
        liElement.addClass('focused');
    } else
        liElement.removeClass('focused');
};

$scope.childLi = function(event){
    var liElement = angular.element(event.target.parentNode);
    var allParentLiElements = document.getElementsByClassName('child-dropdown');
    if(!liElement.hasClass('focused')){
        angular.element(allParentLiElements).removeClass('focused');
        $(event.target).closest('.parent-dropdown').addClass('focused');
        liElement.addClass('focused');
    } else
        liElement.removeClass('focused');
}

請注意，我已經根據Jiam30給出的答案編輯了jsfiddle代碼。

添加焦點類應該像活動類一樣工作，即我剛剛單擊的菜單應該具有焦點類，其他不應該，如果我將鼠標懸停在菜單項上並單擊子項，則子窗體和父項都應該具有焦點類。

小提琴

Answer 1

應避免在控制器中操縱元件。

請改用ng-class（也請使用ng-repeat以避免HTML重復）。 例如：

<li class="dropdown parent-dropdown" ng-click="parentLi()" ng-class="{'focused': isDropdownFocused}"></li>

在控制器中使用此功能：

$scope.parentLi = function() { 
    $scope.isDropdownFocused = !$scope.isDropdownFocused;
};

更新的小提琴： http : //jsfiddle.net/6be56/127/