Переключить два класса с AngularJS / jqLite по клику

Question

Я не хочу получать анимацию slideIn / slideOut, переключая классы slideInRight и slideOutRight на элемент ul.

Я пробовал по-разному, но он работает только с одним className.

Как я могу добавить класс slideInRight для первого и класс slideOutRight при втором щелчке на моем элементе ul с помощью раскрывающегося меню класса?

Я попробовал это так:

angular.element('.dropdown-toggle').on('click', function(){
    angular.element('ul.dropdown-menu').toggleClass('slideOutRight slideInRight');
});

Что я делаю неправильно?

Надеюсь, вы можете помочь.

---

ОБНОВИТЬ:

Вот Plunker текущего состояния моего кода. Таким образом, работает только анимация slideInRight. Если я нажму кнопку еще раз, ul исчезнет без анимации slideOutRight.

В чем дело?

Answer 1

Вы можете попробовать использовать Angular's ng-class?

Я новичок в угловой, но то, как я это сделал, было так:

<ul class="dropdown-menu" ng-class="ulOpen ? 'slideOutRight' : 'slideInRight'">

и JS

angular.element('.dropdown-toggle').on('click', function(){
    if($(this).hasClass('.slideOutRight')) {
        ulOpen = true;
    } else {
        ulOpen = false;
    }
});

Answer 2

Добавьте ulOpen к вашему контроллеру как переменную области видимости

контроллер

$scope.ulOpen = false;

HTML

Тогда вам следует положиться на директиву angularjs ng-click, чтобы установить значение ulOpen:

<button class="dropdown-toggle" type="button" ng-click="ulOpen=!ulOpen">Toggle Class</button>

И ng-класс для переключения класса на основе значения ulOpen:

<ul class="dropdown-menu" ng-class="slideOutRight: ulOpen, slideInRight: !ulOpen">

В общем, я бы порекомендовал по возможности найти решение чисто angularjs. Я нахожу очень мало случаев, когда нет встроенной угловой директивы, которая могла бы обрабатывать то, что я в противном случае попытался бы сделать в jquery.