AngularJS addClass не работает

Question

Я пытаюсь добавитьClass через AngularJS, и код, похоже, не работает, странно, что addClass работает над Parent Menu Item, но не работает над Sub item.

У меня есть вложенные UL и LI, когда я нажимаю на функцию Parent LI ParentLi, вызывается, и она добавляет «сфокусированный» класс к щелкнутому LI, это отлично работает, но когда я нажимаю на Nested LI, я вызываю childLi и Я выполняю ту же операцию, что и для родителя, но класс не добавляется. Я новичок в 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'); 
} 

Обратите внимание, что я отредактировал код jsfiddle, основанный на ответе от Jiam30.

добавление сфокусированного класса должно работать как активный класс, то есть меню, которое я только что нажал, должен иметь сфокусированный класс, другой не должен, так же, если я нахожусь на элементе меню и нажимаю на подэлемент, и подэлемент, и родительский элемент должны иметь сфокусированного класса.

Fiddle

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

Обновлено Fiddle: http://jsfiddle.net/6be56/127/