Question

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

这是指令：

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个菜单，让我们说顶部导航栏，然后在子视图中我有其他菜单来控制选择，当我点击一个菜单时，两个菜单将会开放。

我该如何解决这个问题？

Answer 1

请求一个关于如何要求父指令控制器的示例。这应该使您能够使用更少的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>

Answer 2

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

// 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-click，ng-class指令等更容易（也更优雅）。只需在指令scope函数中的link对象上创建单击处理程序，然后将它们连接到html标记中。

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

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

希望这有帮助。

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

2 个答案: