Accessing scope property inside directive

Question

I'm calling the directive with:

<latest-survey survey="latestSurvey"></latest-survey>

The code for my directive is:

function latestSurvey(){
    return {
        restrict: 'E',
        templateUrl: 'js/modules/survey/latest.html',
        scope: {
            survey: '=survey'
        },
        link: function(scope, element, attrs){
            console.log(scope);
            console.log(scope.survey);
        }
    }
}

The console.log(scope) line outputs the scope:

Scope {$id: "007", $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null…}
$$asyncQueue: Array[0]
$$childHead: null
$$childTail: null
$$destroyed: false
$$isolateBindings: Object
$$listenerCount: Object
$$listeners: Object
$$nextSibling: 
$$childScopeClass
$$phase: null
$$postDigestQueue: Array[0]
$$prevSibling: null
$$watchers: Array[3]
$id: "007"
$parent: 
$$childScopeClass
$root: Scope
survey: Object
this: Scope
__proto__: Scope

As you can see, survey is listed there and I can navigate through it in the console to see its properties. However, the next line console.log(scope.survey) outputs:

undefined

How can I access this object inside the scope?

What happens if you use `{{survey}}` in your directive template? — Sergey Romanov, Jan 11 '15 at 14:31
It lists the survey object. I can access it in the template, but not in the link function for some reason. — babbaggeii, Jan 11 '15 at 14:33
try to wrap your console log od scope.survey into `$timeout` and ttel what you have with timeout 0 and 100. — Sergey Romanov, Jan 11 '15 at 14:36

score 0 · Accepted Answer · answered Jan 11 '15 at 14:45

0

Is the survey loaded asynchronously in the controller(the latestSurvey)? One of the reasons the scope.survey is undefined may be because the request did not finish and the item is empty.

I suggest you try to set $scope.latestSurvey with some dummy data and see if the issue is still present.

answered Jan 11 '15 at 14:45

Cristi Berceanu

1,693
1
10
12

Yes, it is loaded asynchronously. How can I get it to update the directive scope when it comes in? – babbaggeii Jan 11 '15 at 14:46
You can use the "@" instead of "=" or you can just add a loading screen and hide the content, and then show it when the promise has finished. You must use the angularjs `$interceptor`. The best implementation I've seen so far is [this](http://stackoverflow.com/questions/17838708/implementing-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5). Or you can use `$watch` to see if content has changed, but using `$watch` is a sign of bad architecture, usually – Cristi Berceanu Jan 11 '15 at 14:48
@babbaggeii this suggestion was essentially my answer to begin with – scniro Jan 11 '15 at 14:55
@salniro I was having some issues with the "@" and had to add the `$watch` sometimes :/. But I upvoted yours, also :) – Cristi Berceanu Jan 11 '15 at 15:03
1

@CristiBerceanu `$observe` on the `attrs` may be more appropriate in this case, but either way. I made an edit to include it for OP – scniro Jan 11 '15 at 15:07
yep I totally agree with you – Cristi Berceanu Jan 11 '15 at 15:08

Accessing scope property inside directive

1 Answers1