Isolated scope directive is a scope that does not inherit from the parent and exist on its own. Scenario: Lets create a very simple directive which will show the object from the parent controller.
Scope in a Directive Well, all of the directives have a scope associated with them. This scope object is used for accessing the variables and functions defined in the AngularJS controllers, and the controller and link functions of the directive.
The $scope is glue between a controller and view (HTML). It transfers data from the controller to view and vice-versa. As we have seen in the controller section, we can attach properties and methods to the $scope object inside controller function.
Yes:
The 'isolate' scope takes an object hash which defines a set of local scope properties derived from the parent scope. These local properties are useful for aliasing values for templates. Locals definition is a hash of local scope property to its source:
=or=attr- set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of theattrattribute. If noattrname is specified then the attribute name is assumed to be the same as the local name. Given<widget my-attr="parentModel">and widget definition ofscope: { localModel:'=myAttr' }, then widget scope propertylocalModelwill reflect the value ofparentModelon the parent scope. Any changes toparentModelwill be reflected inlocalModeland any changes inlocalModelwill reflect inparentModel. If the parent scope property doesn't exist, it will throw a NON_ASSIGNABLE_MODEL_EXPRESSION exception. You can avoid this behavior using=?or=?attrin order to flag the property as optional.
It should trigger the expected error on every digest that affects the scope property:
parentSet = parentGet.assign || function() {
// reset the change, or we will throw this exception on every $digest
lastValue = scope[scopeName] = parentGet(parentScope);
throw Error(NON_ASSIGNABLE_MODEL_EXPRESSION + attrs[attrName] +
' (directive: ' + newScopeDirective.name + ')');
};
//...
if (parentValue !== scope[scopeName]) {
// we are out of sync and need to copy
if (parentValue !== lastValue) {
// parent changed and it has precedence
lastValue = scope[scopeName] = parentValue;
} else {
// if the parent can be assigned then do so
parentSet(parentScope, lastValue = scope[scopeName]);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With