$scope.variable from inside Directive is undefined, but I see it in the scope's object??

[Olivier Clément]

Hi all,

I want to build a directive to wrap D3js. I saw Brian Ford's blog post which is nice and working, but I want to do more than that.

Correct me if this is not how I should do this:

I want to use attributes in my directive (an element) to configure my d3 instance. This way I can set the source, get the JSON from inside the directive (using a Directive Controller I guess?) and build from there.

So I have this: <directive-name source='stringUrl_to_webservice'></directive-name>

If I log $scope from the directive's controller or link function, I can see the *source* attribute being correctly set.

But as soon as I try to access it directly ($scope.source), I get undefined, from either locations

Here's a quick Plunker: http://plnkr.co/edit/DSpm6L?p=preview (open your console)

I'm not sore what I am doing wrong, or if this really should be the way to go

Thanks

[James Wanga]

From inside the link or controller functions you access attributes as follows: "$attrs.source". 

Check this out. http://plnkr.co/edit/pDez6u?p=preview

[Olivier Clément]

Thanks James

It somewhat makes sense, but I'm not sure to understand why I can't access it with $scope.source anyways, considering I can see it in the inspector?

Wouldn't the fact that this value is accessed through $attrs limit me in term of Data Binding?

Thanks

[Mark Daggett]

Hi I ran into this problem today too. Here is what I found, due to the async nature of Angular when you inspect an object in console it may not be in the state it was when it was inspected by Angular (and caused an error). In my case to test my assumption I wrapped the code inside a $timeout block and low and behold the value was there then. From what I've read in the forums though this typically means you are not doing things in "the Angular way" (tm copyright). I would give it a shot though and see if it fixes your problem. Here is what my timeout block looked like:

console.log(scope.val) // undefined

$timeout(function() {

  console.log(scope.val); // val is defined.

}); 

[Sheng Yunzhou]

Hi Olivier,

I have encountered the same issue recently and have been scratching my head since. So far I haven't managed to access child object of $scope in directive link function yet. My work around is to do the same processing in my Controller.

Have you found a solution/explanation by any chance?

Thanks.

[Olivier Clément]

Hi

I don't quite recall this particular situation, about if I fixed it or went another route (probably the later)

It is, however an issue I just had again yesterday, in a completely different context. 

I do set 

"scope: { value: 'ngModel'}"

In the directive's definition, I can use {{value}} correctly in the directive's template. If I log "$scope" or "scope" from either the Ditective's Controller or the Link function respectively, I see the "value" property correctly polulated, but I *cannot* access "$scope.value or scope.value" directly from controller/link...

I have yet to find why this is happening, let alone finding a solution. I've wrote "many" other directives in the same app whithin having this issue and I don't really see anything inherantly different between this one and the others :/

Wish I could be of more help; in the meantime, it looks like the "solution" is tondonthings a bit differently... :(

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/zCj8GqKCEp0/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Olivier Clément]

About using $timeout: Yes I thought about the same, but it's a no go for me

I feel something's a bit more wonky is going on here..

[dancras]

I believe the problem is that attributes are not interpolated until after the link phase. I believe this is changed in the 1.1.x branch due to the confusion people are experiencing. In the meantime you can use $attrs.$observe:

See http://plnkr.co/edit/BfRZB1?p=preview

[Ricardo Rivas]

Any updates on solution? Ran into the same problem

[Sander Elias]

Hi Ricardo,

What is your problem? can you build a plunk to demonstrate it? 

None of the solutions in this tread will solve your problem?

attr.$observe or $scope.watch or the $timeout don't solve your issue?

Regards

Sander

[Navdeep]

I wrote my custom directive in HTML like this :

<div my-directive = {{pics}}></div>

 where

 $scope.pics

stores my JSON data .

Then in my directive i wrote the following to access the model .

attrs.$observe('myDirective', function(value){
 console.log(value);
});

and it works !

Kindly correct me if I am wrong.