AngularJS: Unable to access scope from within directive

Question

model.data contains the following:

{
    "name": "Jamie",
    "age": 25
}

I have a directive that looks like:

<my-directive data="model.data"></my-directive>

I have defined the directive as follows:

app.directive('myDirective', function(){  
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        templateUrl: 'grid.html',
        controller: function($scope) {
            console.log($scope);
            console.log($scope.data);
        }
    }
}

Problem is that console.log($scope) returns the value in $scope. I can see it containing data:

{
    $$asyncQueue: Array[0],
    $$childHead: null,
    ...
    ...
    data: Array[1]
}

However, console.log($scope.data) returns undefined. Any clue why?

@ArunPJohny The output of `console.log($scope) can be found at i.imgur.com/9wBJU5N.png — user109187
– user109187, Commented Mar 9, 2013 at 13:26
As for creation of model.data, it belongs to a different controller. model.data is having the values for certain. In the page containing the directive, if I display the value of {{model.data}}, then I can see it correctly. — user109187
– user109187, Commented Mar 9, 2013 at 13:28
It looks like a classic async processing problem, to debug the problem you can add some console statement like before the http.get() call, inside the http.get() success handler, and inside the directive controller and see the order of execution — Arun P Johny
– Arun P Johny, Commented Mar 9, 2013 at 14:33

Mark Rajcok · Accepted Answer · 2013-03-09 15:31:12Z

Anytime something like console.log($scope); works, but console.log($scope.someProperty); doesn't, it is because someProperty is being set as a result of resolving a promise (such as an $http call or a promise created with $q).

The first log appears to work, when what is actually happening is that by the time you manually look at the log entry (i.e., click to expand its contents), the value has been populated/resolved.

In your controller, you'll need to $watch the property, and set up the watch callback function to do whatever it is you want to do with the data once it arrives/is resolved.

Collectives™ on Stack Overflow

AngularJS: Unable to access scope from within directive

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related