No data when passing an object to a directive in AngularJS

Question

How do you pass an object to a directive? I'm trying to access users in my directive's scope without success. This is what I've tried:

In my controller I set an array of users to a scope:

$scope.users = payload.data.results;

Then I want to pass that object to my directive as an attribute:

<display test123='users'></display>

The directive function:

function ListDisplay() {
    var directive = {
      replace: 'true',
      restrict: 'E',
      scope: {
        test123: '='
      },
      controller: ListDisplayController,
      controllerAs: 'vm',
      bindToController: true,
      link: ListDisplayLinkFunc
    };

    return directive;


    function ListDisplayController($scope) {
      console.log($scope.test123);

    }

    function ListDisplayLinkFunc(scope, elem, attr) {

      console.log(scope.test123);
    }
  }

But when I try to console out scope.data I get undefined.

I think data is related to html5 attribute.try to use some other name.It might help — RIYAJ KHAN
– RIYAJ KHAN, Commented Feb 1, 2016 at 12:36
thanks @RIYAJKHAN I've changed it to test123 and still get undefined. :( — Prometheus
– Prometheus, Commented Feb 1, 2016 at 12:40

valepu · Accepted Answer · 2016-02-01 12:47:48Z

2

you are using controllerAs: 'vm' and bindToController: true, this means that the values you pass in the scope are assigned to a variable called vm

Try this:

function ListDisplayController($scope) {
  var vm = this;
  console.log(vm.test123);

}

to handle using "bindToController" in the link function you can do

function ListDisplayLinkFunc(scope, elem, attr) {

  console.log(scope.vm.test123);
}

you can see it in this plunker: http://plnkr.co/edit/r2wuTE5oafYeu8h3Cjio?p=preview

answered Feb 1, 2016 at 12:47

valepu

3,3557 gold badges40 silver badges73 bronze badges

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

Comments

Shashank Agrawal · Accepted Answer · 2016-02-01 12:46:05Z

2

Seems like payload.data.results is a result of an AJAX call. Your directive is being compiled before your AJAX call is succeeded. So you need to register a watch in your controller to get the value when the data is updated via the AJAX call.

function ListDisplayLinkFunc(scope, elem, attr) {
    console.log(scope.test123);

    scope.$watch('test123', function(newValue) {
         if (newValue) {
            console.log('Updated users in the directive', newValue);
         }
    });
}

answered Feb 1, 2016 at 12:46

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

2 Comments

Prometheus Over a year ago

It looks like the answer as a combination of both @valepu and Shashank Agrawal answers, what to do????

Prometheus Over a year ago

Well both were the issue, first the data had not finished being loaded and then controllerAs assigned it to a variable called vm.

Collectives™ on Stack Overflow

No data when passing an object to a directive in AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related