Notation Symbols in Isolated Scope

In my previous blog we studied the scope in AngularJS(we read three types of scope in a directive, Parent Scope, Inherited Scope and Isolated Scope). Isolated Scope was completely Isolated after AngularJS-1.2 so we can not access Parent Scope directly. But sometimes we face a requirement where we want to access Parent Scope property/methods into Isolated Scope, then Notation Symbols get into the role, and they help us to access parent scope property/methods. There are three types of Notations Symbols:

1. @ (Read Only/1-way-binding) Notation Symbol
2. = (2-way-binding) Notation Symbol
3. & (Function) Notation Symbol

1. @ (Read Only/1-way-binding) Notation Symbol: If we bind a property from Parent Scope to Child Directive Scope via @ notation, then, whatever change is made to the Parent Scope property the same will automatically reflect to Child Directive Scope property also. But if we make change to Child Directive Scope property then that change will not be reflected in Parent Scope property. So we call it a Read Only Notation or 1-way-binding Notation.

Defining a Isolated Scope Directive named as readOnlyNotationSymbol below:
[js]
notationSymbolsTestApp.directive(‘readOnlyNotationSymbol’, function () {
return {
scope: {
readOnlyAge: ‘@userAge’
},
link: function (scope) {
scope.increaseAge = function () {
scope.readOnlyAge++;
};
},
template: "<div>Read Only Age: {{readOnlyAge}}</div> <input type=’button’ value=’Update Read Only Age’ ng-click=’increaseAge()’>"
};
});
[/js]

Now we have to use above readOnlyNotationSymbol directive as below, and we have to provide age value to user-age attribute which will be assigned to Isolate Directive Scope property named readOnlyAge with the help of @ Notation Symbol.
[html]
<div read-only-notation-symbol user-age="{{age}}"></div>
[/html]

NOTE: Attribute definition is exactly same as directive. Defining the first letter small with Camel-Case style and with HTML as all small letters with -/minus separator.

2. = (2-way-binding) Notation Symbol: If we bind property from Parent Scope to Child Directive Scope via = Notation, then the changes made to Parent Scope property will automatically reflect in Child Directive Scope property. And if changes are made to Child Directive Scope property, they will automatically reflect in Parent Scope property as well. So we call it a 2-way-binding Notation.

Defining a Isolated Scope Directive with twoWayBindingNotationSymbol named as below:
[js]
notationSymbolsTestApp.directive(‘twoWayBindingNotationSymbol’, function () {
return {
scope: {
twoWayBindAge: ‘=userAge’
},
link: function (scope) {
scope.increaseAge = function () {
scope.twoWayBindAge++;
};
},
template: "<div>Two Way Bind Age: {{twoWayBindAge}}</div> <input type=’button’ value=’Increase Age’ ng-click=’increaseAge()’>"
};
});
[/js]

Now we have to use above twoWayBindingNotationSymbol directive as below, and we have to provide age value to user-age attribute which will be assigned to Isolate Directive Scope property named twoWayBindAge with the help of = Notation Symbol.
[html]
<div two-way-binding-notation-symbol user-age="age"></div>
[/html]

NOTE: When we are accessing Parent Scope property with @ Notation then we have to pass value of that property with the help of {{}}/curly braces, to that attribute and when we are accessing Parent Scope property with = Notation then we have to pass property directly to that attribute.

3. & (Function) Notation Symbol: If we want to access any method/function into Isolated Directive Scope from Parent Scope then we have to use & (Function) Notation Symbol.

Defining a Isolated Scope Directive with expressionFunctionBindingNotationSymbol named as below:
[js]
notationSymbolsTestApp.directive(‘expressionFunctionBindingNotationSymbol’, function () {
return {
scope: {
functionIncreaseAge: ‘&increaseAge’
},
template: "<input type=’button’ value=’Increase Age’ ng-click=’functionIncreaseAge()’>"
};
});
[/js]

Now we have to use above expressionFunctionBindingNotationSymbol directive as below, and we have to provide increaseAge function to increase-age attribute which will be assigned to Isolate Directive Scope method named functionIncreaseAge with the help of & Notation symbol.
[html]
<div expression-function-binding-notation-symbol increase-age="increaseAge()"></div>
[/html]

NOTE: Most of the time, for sharing the function/method between Parent Scope and Child Directive Scope we use controllers in Directives, which we will discuss in one of my upcoming blog. But & (Method) Notation can also be used in some cases.

Note: You can checkout full working source code from this link.

Amit Kumar
amit.kumar@intelligrape.com
in.linkedin.com/in/amitthakkar01
twitter.com/amit_thakkar01
More Blogs by Me