CODEWITHSUNDEEP
angularjsscope
motleydev
motleydev

Reputation: 3447

Accessing parent "isolated" scope from child directive

I have a nested directive. I am trying to access the scope of the parent directive (which is isolated) but can't seem to make it work. I get undefined errors when trying to log it out to the console.

Here's an example of what I am trying to get to work.

app.directive("myParentControl", function() {
    return {
        restrict: "A",
        scope: {},

        controller: function($scope) {
            $scope.propertyOne = "PropertyOne"
    },

    link: function(scope, element) {
        console.log(scope.propertyOne);
    }
  }
});

app.directive("myChildControl", function() {
    return {
        require: "^myParentControl",
        link: function(scope, element, attrs, myParentControlCtrl) {
            //Undefined
            console.log(myparentControlCtrl.propertyOne);
            //Not visible in scope inspector
            myParentControlCtrl.newValue = "New Value";
        }
    }
})

Upvotes: 0

Views: 1144

Answers (2)

Nitish Kumar
Nitish Kumar

Reputation: 4870

You can directly access the scope of the parent directive using scope in child directives.

myApp.directive("myChildControl", function() {
    return {
        require: "^myParentControl",
        link: function(scope, element, attrs, myParentControl) {
            console.log(scope.propertyOne);
            //Not visible in scope inspector
            myParentControl.newValue = "New Value";
        }
      }
    })

SEE DEMO HERE

Upvotes: 0

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

You are setting the variable to the $scope: $scope.propertyOne = "PropertyOne", but try to access it from the controller: console.log(myparentControlCtrl.propertyOne). Of course it is undefined.

Set the property in the controller:

controller: function($scope) {
    this.propertyOne = "PropertyOne";
},

If you need to access it from the template of myParentControl, put the controller in the scope using the controllerAs property:

app.directive("myParentControl", function() {
    return {
        ...
        controllerAs: "ctrl",
        ...
    };
});

From the template access it as:

<span>{{ ctrl.propertyOne }</span>

Upvotes: 1

Related Questions