嵌套的Angular指令触发父对象上的作用域函数

Nested Angular directives triggering scope functions on parents

本文关键字:对象 函数 作用域 Angular 指令 嵌套      更新时间:2023-09-26

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

手风琴似乎能正常工作,直到我把一个放在另一个里面。当我打开或关闭属于内部手风琴的面板时,它会切换父手风琴的包含项。

我知道这与继承的作用域有关,因为如果我从内部accordian控制台.log(作用域),它会记录2个作用域对象,但我不知道如何使内部accordiant不继承父级的作用域,并且仍然正常工作,因为它需要访问我授予它访问权限的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();

            });

        }        
    };
}]);

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

Doh!我当时很笨。内部指令没有调用外部指令的toggle函数,外部指令将内部指令的触发器用于自身。这是冒犯性的台词。

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

很明显,它也会将行为附加到任何子指令中具有该类的任何元素上。

现在,如果我能找到一个jQuery选择器,它会寻找".accordian触发器",但当它到达".accardian"时不会再深入下去就好了