AngularJS controller variable not passing to child directive

Question

I have the following code. I read that directives can inherit objects and variables from their parent scopes. I have a controller with a child directive, but I can't seem to get my $scope.title inside my directive.

Why is this?

https://plnkr.co/edit/h4YlRPa5ZWQkwPZ3isjZ?p=preview

var mod = angular.module('myApp', []);

mod.controller('myControl', controlFunc).directive('myDirec', direcFunc);

function controlFunc($scope){
  $scope.title = "John Smith";
}
function direcFunc(){
  return {
    restrict: 'E',
    template: '<h1>' + $scope.title + '</h1>'
  };
}

What do you expect to see in the plunker? I see "John Smith". — Matt
– Matt, Commented Feb 11, 2016 at 20:20

Pankaj Parkar · Accepted Answer · 2016-02-11 20:32:47Z

3

The way you are trying to access the scope in directive, you must have get console error $scope is not defined, as $scope isn't directly available in directive.

You can't access variable on HTML directly using $scope variable. You should either use angular directive for binding like ng-bind/{{}}(interpolation directive) will be helpful in this case.

Your directive template should be like below.

function direcFunc(){
  return {
    restrict: 'E',
    scope: false, //by default false, means will not create a new scope
    //template: '<h1>{{title}}</h1>', //alternative
    template: '<h1 ng-bind="title"></h1>'
  };
}

Currently what you are thinking isn't correct, here directive is not creating any kind of child scope. Basically by default directive is using scope: false options, which says directive to don't create any scope use the existing one. If you wanted to confirm the directive scope is same as that of controller, then you could put console.log(scope) inside directive link function.

function direcFunc(){
  return {
    restrict: 'E',
    scope: false, //by default false, means will not create a new scope
    //template: '<h1>{{title}}</h1>', //alternative
    template: '<h1 ng-bind="title"></h1>',
    link: function(scope, element, attrs){
        console.log("Below scope will be same as that of controller");
        console.log(scope);
    }
  };
}

edited Feb 11, 2016 at 20:32

answered Feb 11, 2016 at 20:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

gespinha Over a year ago

So, directive only inherit controller contents if I use ng-bind specifically? Is there anyway to make the directive inherit all of the controller's contents instantly?

gespinha Over a year ago

I have used the link function to console.log the scope of the directive and it is the same as the scope of the controller, but why can't I use the $scope.title from the controller if its the same scope?

Pankaj Parkar Over a year ago

@GEspinha no.. ng-bind is used to print controller scope binding on DOM.. do look at updated. Thanks :)

Pankaj Parkar Over a year ago

@GEspinha you can't inject $scope dependency on directive function.. and what you were doing is syntactically wrong.. you need to really clear out your basics by reading this angular directive basic

Pankaj Parkar Over a year ago

@GEspinha if you are cleared with approach, then you could accept the answer thanks :)

|

Collectives™ on Stack Overflow

AngularJS controller variable not passing to child directive

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related