Why would '@' binding need attrs.$observe()?

77 views
Skip to first unread message

LLoydsensei

unread,
Jan 31, 2014, 9:16:11 AM1/31/14
to ang...@googlegroups.com
Hi guys.

API documentation (http://docs.angularjs.org/api/ng.$compile#description_comprehensive-directive-api_attributes) says  "[...] during the linking phase the interpolation hasn't been evaluated yet and so the value is at this time set to undefined."

1) I cannot understand why someone would use attrs.$observe() instead of $scope.$watch(), since both appear to work the same way
2) I don't understand why the documentation talks about the interpolation being undefined during the linking phase when this http://jsfiddle.net/3Vh43/1/ proves the contrary

Did I happen to stumble upon a particular case in my jsfiddle where it works or is the documentation wrong there?

Regards,
LLoyd

PPS: Tested on angular 1.1.5 and 1.2.10

Mike Alsup

unread,
Feb 6, 2014, 10:49:42 PM2/6/14
to ang...@googlegroups.com
You need to use $observe to watch DOM attributes who's values contain interpolation. 

<span title="Hello {{name}}">blah</span>

attrs.$observe('title', function() {
   ...
});

$watch can not be used for string expressions that contain interpolation.





--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, 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.
For more options, visit https://groups.google.com/groups/opt_out.

Vlad GURDIGA

unread,
Feb 7, 2014, 3:56:24 AM2/7/14
to ang...@googlegroups.com
Perhaps a JSFiddle would help us understand each other better. We had a short conversation with LLoyd about this, so I will try to illustrate the context and what is that we don’t understand. Here is the JSFiddle: http://jsfiddle.net/gurdiga/9KeKM/.

As you will see in your browser console, when you click “Increase magic!” button it increases magicLevel in the parent scope, and also changes the myMagic directive’s incantation attribute that interpolates it. Then, in the link function the incantation attribute is watched for changes with both $scope.$watch and attrs.$observe, which both are triggered, and this is the very phenomenon that LLoyd and I were wondering about: which observation method is appropriate to use?

Sander Elias

unread,
Feb 7, 2014, 5:36:47 AM2/7/14
to ang...@googlegroups.com
Hi Lloyd, Vlad,

For using in the link or controller there isn't much difference. However, if you need to do some logic in your compile, there is no scope in there!
You can use attr.$observe in places where the scope isn't there, or the wrong scope. (you need to do something in the link function of an transcluded replaced directive with an isolated scope!)

Regards
Sander

Vlad GURDIGA

unread,
Feb 7, 2014, 5:41:49 AM2/7/14
to ang...@googlegroups.com
Hm… that begins to make sense! Thank you Sander!


--
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/REBj8yEgRPc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

LLoydsensei

unread,
Feb 7, 2014, 6:05:00 AM2/7/14
to ang...@googlegroups.com


For using in the link or controller there isn't much difference. However, if you need to do some logic in your compile, there is no scope in there!
You can use attr.$observe in places where the scope isn't there, or the wrong scope. (you need to do something in the link function of an transcluded replaced directive with an isolated scope!)

Nice to know I didn't even think of it! So I get why and when we should use $observe instead of $watch.

However, can this still called "the linking phase" as specified in the doc? How could we be more precise in it?

Regards,
LLoyd
Reply all
Reply to author
Forward
0 new messages