What is the best way to access parent directive scope from child directive?

Question

AngularJS Module and Directives

angular.module('tabApp', [])

.directive('tabPanel', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div><div tab-content></div>',
        link: function (scope) {
            alert(scope.isOpen);
        }
    };
})

.directive('tabContent', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div>Content</div>',
        link: function (scope) {
            alert(scope.isOpen);
        }
    };
});

HTML

<div ng-app="tabApp">
    <div tab-panel is-open="true"></div>
</div>

I need the tabContent to access isOpen property in the tabPanel? What is the best and shortest way to achieve this?

You should be creating controllers for your directives / components, then you can use the `require` property and the `ctrls` argument. See https://docs.angularjs.org/api/ng/service/$compile#-require- — Phil, Feb 21 '17 at 03:26

score 3 · Accepted Answer · answered Feb 21 '17 at 03:29

3

You just have to pass the is-open from the parent directive to child directive...

.directive('tabPanel', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div><div tab-content is-open="isOpen"></div>',
        //...
    };
})

Check this jsFiddle

answered Feb 21 '17 at 03:29

The.Bear

5,621
2
27
33

1

wow, i never thought the answer would be this simple, thanks. – shinorz0721 Feb 21 '17 at 03:32

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

change child directive definition to

.directive('tabContent', function () {
    return {
        scope: {
            isOpen: '='
        },
        template: '<div>Content</div>',
        link: function (scope, attr, element, tabApp) {
            alert(scope.isOpen);
        },
        require: '^tabApp'
    };

and then use link function to receive the tabApp, something similar to this

edited May 23 '17 at 12:09

Community

1
1

answered Feb 21 '17 at 03:27

harishr

17,807
9
78
125

thanks, but this is not the answer that i want, because the
can be placed in anywhere of the HTML. If the
is in nested structure, the '^tabApp' wont work anymore.
– shinorz0721 Feb 21 '17 at 03:28
so make it optional – harishr Feb 21 '17 at 06:54

What is the best way to access parent directive scope from child directive?

2 Answers2