我创建了一个相当简单的 Accordion ，其中包含 Accordion 指令和 Accordion 项目指令。外部的 Accordion 指令只是为项目提供了一种 self 注册和通信的方式(例如，当单击一个项目时，其他项目应该关闭)。
Accordion 似乎工作正常，直到我将一个 Accordion 嵌套在另一个中。当我打开或关闭属于内部 Accordion 的面板时，它会切换父 Accordion 的包含项目。
我知道这与继承的范围有关，因为如果我从内部 Accordion console.log(scope) ，它会记录 2 个范围对象，但我不确定如何让内部 Accordion 不继承父级的范围并且仍然可以正常工作，因为它需要访问我授予它访问权限的 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();
});
}
};
}]);
如有任何建议，我们将不胜感激。
最佳答案
哦!我当时真是太傻了。内部指令没有调用外部指令的切换函数，外部指令本身使用内部指令的触发器。这是有问题的行。
element.find('.accordian-trigger').on('点击', 函数(事件){
它显然也会将行为附加到任何子指令中具有该类的任何元素。
现在，如果我能找到一个 jQuery 选择器，它会查找“.accordian-trigger”，但当它到达“.accordian”时不会再深入
关于javascript - 嵌套 Angular 指令触发父级的作用域函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28866556/