从不使用AngularJS的指令操作类

Question

我正在为一个相当大的应用程序构建一个自定义滑动菜单切换。我目前有两个指令slideTrigger，它们将被放置在slideNav和"#main-nav"上，这些指令将放在"#current-view"和'#main-nav"上。

切换类适用于"#current-view"，但不适用于<section id="current-view" slide-nav ui-view></section> <nav id="main-nav" slide-nav class="navbar navbar-default" role="navigation" ng-show="$state.current.name != 'landing'"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <div class="row"> <div class="col-xs-6"> <button slide-trigger id="slide-trigger" type="button" class="navbar-toggle slide-trigger navicon-button hyiq larr"> 。为什么这样，我怎样才能使它工作？

HTML

'use strict';

angular.module('directives')
    .directive('slideNav', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            scope.$on('slide-triggered', function (event, status) {
                if (status.action === 'close') {
                    element.toggleClass('slide-right');
                } else if (status.action === 'open') {
                    element.addClass('slideable');
                    element.toggleClass('slide-right');
                }
            });
        }
    };
}]);


angular.module('directives')
    .directive('slideTrigger', ['$rootScope', function ($rootScope) {
    'use strict';
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {
            element.on('click', function () {
                var openMenu = element.hasClass('open');
                if (openMenu) {
                    $rootScope.$broadcast('slide-triggered', {
                        action: "close"
                    });
                    element.toggleClass('open');
                } else if (!openMenu) {
                    $rootScope.$broadcast('slide-triggered', {
                        action: "open"
                    });
                    element.toggleClass('open');
                }
            });
        }
    };
}]);

Angular JS

{{1}}