Nested Angular directives triggering scope functions on parents

Question

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.

Scopes do not inherit from their parents. But you can access the parent scope with `$scope.$parent`. Have a look here: http://stackoverflow.com/questions/21453697/angularjs-access-parent-scope-from-child-controller — 1.618, Mar 04 '15 at 23:51
How is my inner accordion able to accidentally call functions of the parent accordian's scope? — jonhobbs, Mar 05 '15 at 00:11
Can you add the markup you are using when you nest the accordions? — Joe Enzminger, Mar 05 '15 at 04:18
Thanks Joe, but I've managed to answer my own dumb question. — jonhobbs, Mar 05 '15 at 13:06

score 0 · Accepted Answer · answered Mar 05 '15 at 13:06

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"

Nested Angular directives triggering scope functions on parents

1 Answers1