同一页面上的多个指令一次执行

时间:2016-01-05 12:59:50

标签: angularjs angularjs-directive

我已经建立了一个指令来创建一个切换菜单,当我在同一页面上多次使用相同的指示时我遇到了问题。

这是指令:

function menuTrigger($document) {
    return {
        restrict: 'E',
        scope: true,
        link: function(scope, element, attrs) {
            var
                menuOpen    = false,
                elButton    = angular.element(document.querySelectorAll(".menu-button")),
                elContent   = angular.element(document.querySelectorAll(".menu-content")),
                elClose     = angular.element(document.querySelectorAll("[menu-close]"));

            var
                pos = attrs.pos,
                style;

            if (pos == 'tl') {
                style = {top: '0', left: '0', 'transform-origin': 'top left'}
            } else if (pos == 'tr') {
                style = {top: '0', right: '0', 'transform-origin': 'top right'}
            } else if (pos == 'bl') {
                style = {bottom: '0', left: '0', 'transform-origin': 'bottom left'}
            } else if (pos == 'br') {
                style = {bottom: '0', right: '0', 'transform-origin': 'bottom right'}
            };


            element.bind('click', function(e) {
                e.stopPropagation();
                openMenu();
            });
            elClose.bind('click', function(e) {
                e.stopPropagation();
                closeMenu();
            });
            $document.on('click', function () {
                if (menuOpen == true) {
                    closeMenu();
                };
            });

            function openMenu() {
                menuOpen = true;
                elContent.removeClass('menu-hide');
                elContent.css(style);
                setTimeout(function(){ 
                    elContent.addClass('menu-open');
                }, 100);
            };
            function closeMenu() {
                menuOpen = false;
                elContent.removeClass('menu-open');
                setTimeout(function(){ 
                    elContent.addClass('menu-hide');
                    elContent.removeAttr('style');
                }, 400);
            };
        }
    };
}

所以,例如,如果我在主视图上使用1个菜单,让我们说顶部导航栏,然后在子视图中我有其他菜单来控制选择,当我点击一个菜单时,两个菜单将会开放。

我该如何解决这个问题?

2 个答案:

答案 0 :(得分:2)

请求一个关于如何要求父指令控制器的示例。这应该使您能够使用更少的jQuery样式代码。

myModule.directive('myParentDirective', function(){
    return {
       controller: function(){
           var vm = this;
           vm.foo = 'bar';
       }
    };
});

myModule.directive('myChildDirective', function(){
    return {
       require: 'myParentDirective',
       link: function(scope, elem, attrs, parentController){
           console.log(parentController.foo); // equals 'bar'
       }
    };
});

<my-parent-directive>
    <my-child-directive></my-child-directive
</my-parent-directive>

答案 1 :(得分:1)

您多次绑定到网页上的多个元素:

// This will be an array of elements that will match the class .menu-button.
// Not just the .menu-button element within your directive.
// Try typing it in your browser developer tools console to see what I mean.

angular.element(document.querySelectorAll(".menu-button"))

如果你真的想从指令中获取各个元素,你需要找到它们:

// Use the element argument from the link function 
angular.element(element[0].querySelectorAll(".menu-button"));    

但是 - 在大多数情况下,使用ng-clickng-class指令等更容易(也更优雅)。只需在指令scope函数中的link对象上创建单击处理程序,然后将它们连接到html标记中。

scope.myClickHandler = function() {
  // Magic goes here
};

<div my-directive ng-click="myClickHandler"></div>

希望这有帮助。