Building Your Own Directives
While an isolated scope does not prototypically inherit from its parent,
it can still access its parent's scope through the $parent property.
But this is considered a bad practice because you are undermining the
isolation of the directive from its surroundings.Since our scope is now isolated from the parent scope, we need to explicitly map
values between the parent scope and the isolated scope. This is done by referencing
AngularJS expressions on the attributes of the element where the directive appears.
In the case of our pagination directive, the num-pages and current-page attributes
fulfill this role.
We can synchronize the expressions in these attributes with properties on the
template scope through watches. We can set this up manually or we can ask
AngularJS to wire them up for us. There are three types of interface we can specify
between the element's attributes and the isolated scope: interpolate (@), data
bind (=), and expression (&). You specify these interfaces as key-value pairs on
the scope property of the directive definition.
The key is the name of the field on the isolated scope. The value is one of @, =, or &
followed by the name of the attribute on the element:
scope: {
isolated1: '@attribute1',
isolated2: '=attribute2',
isolated3: '&attribute3'
}Here we have defined three fields on the isolated scope and AngularJS will map their
values from the specified attributes on the element where the directive appears.
If the attribute name is omitted from the value, then it is assumed that
the attribute has the same name as the isolated scope field:
scope: { isolated1: '@' }
It will expect the attribute to be called isolated1.Interpolating the attribute with @
The @ symbol indicates that AngularJS should interpolate the value of the specified
attribute and update the isolated scope property when it changes. Interpolation is
used with {{}} curly braces to generate a string using values from the parent scope.