AngularJS: unable to access scope inside directive

Question

model.data contains the following:

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

I have a directive that looks like this:

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

I 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); } } } 

The problem is that console.log($scope) returns a value in $ scope. I see this with data:

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

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

Answer 1

Something like console.log($scope); works at any time console.log($scope); but console.log($scope.someProperty); this is not so because someProperty installed as a result of resolving a promise (for example, a $ http call or a promise created using $ q).

The first log works when it actually happens that by the time you manually review the log entry (i.e. click to expand its contents), the value has been filled / allowed.

In your controller, you will need to observe the $ property and configure the clock callback function to do what you want to do with the data when it arrives / is allowed.