嵌套 Angular 指令在父级上触发作用域函数

Question

我创建了一个相当简单的手风琴，它包括手风琴指令和手风琴项目指令。外部 accordian 指令只是为项目提供了一种自我注册和通信的方式（例如，当一个被点击时，其他的应该关闭）。

在我将一个嵌套在另一个中之前，手风琴似乎可以正常工作。当我打开或关闭属于内部手风琴的面板时，它会切换父手风琴的包含项。

我知道这与继承范围有关，因为如果我从内部手风琴 console.log(scope) 记录 2 个范围对象，但我不确定如何让内部手风琴不继承父级的范围并且仍然可以正常工作，因为它需要访问我赋予它访问权限的 HTML 属性。

希望代码更有意义。

angular.module('app.directives').directive('AccordianItem', [function () {

    return {

        require:'^Accordian',
        restrict: 'EA',
        scope: {
            isOpen: '=?',
            isDisabled: '=?'
        },

        link: function (scope, element, attrs, accordionCtrl) {


            // Watch the isOpen variable
            scope.$watch('isOpen', function(value) {

                // Open or close this panel
                if (value){
                    scope.openPanel();
                }
                else{
                    scope.closePanel();
                }

            });


            scope.openPanel = function(){

                // Removed for brevity

            };

            scope.closePanel = function(){

                // Removed for brevity

            };



            // Toggle function
            scope.toggleOpen = function() {

                // Removed for brevity

            };


            // Add trigger behaviour

            element.find('.accordian-trigger').on('click', function (event) {

                scope.toggleOpen();


            });


        }        

    };

}]);

如有任何建议，我们将不胜感激。

Answer 1

呸！我当时很愚蠢。内部指令没有调用外部指令的切换函数，外部指令正在为自己使用内部指令的触发器。这是违规行。

element.find('.accordian-trigger').on('click', 函数(事件) {

它显然会将行为附加到任何子指令中具有 class 的任何元素。

现在要是我能找到一个 jQuery 选择器就好了，它会寻找“.accordian-trigger”，但在找到“.accordian”时不会再深入

嵌套 Angular 指令在父级上触发作用域函数

Nested Angular directives triggering scope functions on parents

javascript

angularjs

angularjs-directive

angularjs-scope