I have created a fairly simple accordian which comprises an accordian directive and accordian-item directives. The outer accordian directive simply provides a way for the items to register themselves and communicate (e.g. when one is clicked the others should close).
The accordian seems to work correctly until I nest one inside another. When I open or close a panel belonging to the inner accordian it toggles the containing item of the parent accordian.
I know it is something to do with inherited scopes because if I console.log(scope) from the inner accordian it logs 2 scope objects, but I'm not sure how to get te inner accordian to not inherit the parent's scope and still work correctly as it needs to have access to the HTML attributes I've given it access to.
Hope fully the code will make more sense.
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();
});
}
};
}]);
Any advice would be gratefully received.
Doh! I was being pretty stupid. The inner directive was not calling the outer directive's toggle function, the outer directive was using the inner directive's trigger for itself. Here is the offending line.
element.find('.accordian-trigger').on('click', function (event) {
It will obviously attach the behaviour to any elements with that class in any sub directives too.
Now if only I could find a jQuery selector which would look for ".accordian-trigger" but not go any deeper when it gets to an ".accordian"
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments