{"id":14461,"date":"2014-06-30T23:08:42","date_gmt":"2014-06-30T17:38:42","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=14461"},"modified":"2017-03-06T10:50:24","modified_gmt":"2017-03-06T05:20:24","slug":"notation-symbols-in-isolated-scope","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/notation-symbols-in-isolated-scope\/","title":{"rendered":"Notation Symbols in Isolated Scope"},"content":{"rendered":"

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

1. @ (Read Only\/1-way-binding) Notation Symbol<\/strong>
\n2. = (2-way-binding) Notation Symbol<\/strong>
\n3. & (Function) Notation Symbol<\/strong><\/p>\n

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

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

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

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

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

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

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

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

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

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

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

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

Note: <\/strong>You can checkout full working source code from this link<\/a>.<\/p>\n

Amit Kumar
\namit.kumar@intelligrape.com<\/a>
\nin.linkedin.com\/in\/amitthakkar01
\ntwitter.com\/amit_thakkar01
\nMore Blogs by Me<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":52,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0},"categories":[1],"tags":[1189,1457,1460,1300,1461],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14461"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/52"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=14461"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/14461\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=14461"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=14461"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=14461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}