Mastering Web Application

Chapter 8

A common mistake is to expect an interpolated object to be the object

itself. Interpolation always returns a string. So if you have an object, say

user has a field called userName, then the interpolation of {{user}}

will convert the user object to a string and you will not be able to

access the userName property on the string.

This attribute interpolation is equivalent to manually $observe the attribute:

attrs.$observe('attribute1', function(value) {

isolatedScope.isolated1 = value;

});

attrs.$$observers['attribute1'].$$scope = parentScope;

Binding data to the attribute with =

The = symbol indicates that AngularJS should keep the expression in the specified
attribute and the value on the isolated scope in sync with each other. This is a two-way
data binding that allows objects and values to be mapped directly between the inside
and outside of the widget.

Since this interface supports two way data binding, the expression given

in the attribute should be assignable (that is, refers to a field on the

scope or an object) and not an arbitrary computed expression.

This binding is a bit like setting up two $watch functions:

var parentGet = $parse(attrs['attribute2']);

var parentSet = parentGet.assign;

parentScope.$watch(parentGet, function(value) {

isolatedScope.isolated2 = value;

});

isolatedScope.$watch('isolated2', function(value) {

parentSet(parentScope, value);

});

The actual implementation is more complex to ensure stability between the two scopes.

Providing a callback expression in the attribute with &

The & symbol indicates that the expression provided in the attribute on the element
will be made available on the scope as a function that, when called, will execute the
expression. This is useful for creating callbacks from the widget.