Angular js passing a variable from a parent directive to a child directive

Question

I have two directives. A parent and a child. I want to pass a variable to the parent directive and have it accessible to multiple children. Here are the directives:

directives.directive('supNavDirective', function () {
    return {
        restrict: "E",    //declare by element
        replace: true,
        scope: {
            navtree: '='
        },
        controller: function ($scope, $element) {
            $scope.returnNavTree=function(){
                return $scope.navtree
            }
        },
        link: function (scope, element, attrs) {
        }
    }
})


directives.directive('collection', function () {
    return {
        require:"supNavDirective",
        restrict: "E",    //declare by element
        link: function (scope, element, attrs,superDir) {
         scope.collection = superDir.returnNavTree()
        },
        template: "<ul class=\"nav nav-list tree\"><member ng-repeat=\"member in collection\" member=\"member\"></member></ul>"
    }
})

Here's the html:

<superNavDirective collection navtree="analyticsNavTree"></superNavDirective>

The child directive does not appear to get the variable. Why not?

Answer 1

First, the correct syntax to "require" the parent controller is:

require:"^supNavDirective"

Second, you must add returnNavTree method to the controller instance itself (instead of $scope ) to access it from the child directive, like this:

...
controller: function ($scope, $element) {
  this.returnNavTree = function(){
    return $scope.navtree
  }
},
...