{"id":32304,"date":"2016-02-11T20:21:24","date_gmt":"2016-02-11T14:51:24","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=32304"},"modified":"2017-08-03T14:25:27","modified_gmt":"2017-08-03T08:55:27","slug":"scope-in-angularjs-custom-directive","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/scope-in-angularjs-custom-directive\/","title":{"rendered":"Scope in AngularJs Custom Directive"},"content":{"rendered":"

In AngularJs \u2018directive\u2019 plays an important role. AngularJs custom directive<\/a> has many options like replace, scope, transclude etc. Here we will discuss \u2018scope\u2019 property.<\/p>\n

The scope can have 2 types of value:
\n1.Boolean
\n2.Object<\/p>\n

1. Boolean<\/strong> :
\nWhen scope\u2019s value is false:-
\nIt defaults value. It creates a new scope but just similar to its parent scope means any changes in parent\u2019s scope reflects the directive\u2019s scope and vice versa.<\/p>\n

When scope’s value is true:-
\nIt creates a new scope. It is inherited scope and different from parent (controller) scope. If you make some changes in the directive scope then these changes will not reflect in the controller scope. But if you make some changes in parent scope, these changes will reflect in directive scope.<\/p>\n

2. Object<\/strong>:
\nWhen scope\u2019s value is a blanobject: :-
\nIt creates an isolated scope. But we can access the parent scope.<\/p>\n

When scope\u2019s value is like
\n {
\n'twoWayBindedTitle':'=newTitle',
\n'oneWayBindedTitle':'@readOnlyTitle',
\n'myInternalFunction':'&myParentFunction'
\n}<\/code><\/p>\n

Read only access<\/strong>: @ symbol tells that it has read only access. To make a read only variable we need to define as above. Here ‘oneWayBindedTitle’ is the directive scope\u2019s variable and ‘readOnlyTitle’ is the attribute of directive.
\nTwo way binding<\/strong>: = symbol tells that it has read and write both access. To make a two way bind variable we need to define as above. Here ‘twoWayBindedTitle’ is the directive scope\u2019s variable and ‘newTitle’ is the attribute of the directive.
\nMethod binding<\/strong>: Sometimes we need to access the parent scope\u2019s method in directive scope. So using & symbol we can access them in directive scope. To access the parent scope\u2019s method in directive scope need to define it like above. Here ‘myInternalFunction’ is the method in directive scope and ‘myParentFunction’ is the attribute of the directive.<\/p>\n

Controller Code: <\/strong><\/p>\n

[js]
\n$scope.title="Magic of Scope In Directive";
\nsetTimeout(function(){
\n $scope.title=’Title is changed by Controller scope’;
\n $scope.$digest();
\n},3000);
\n[\/js]<\/p>\n

Directives Code:<\/strong><\/p>\n

[js]
\n .directive(‘directiveScopeValueIsFalse’, function () {
\n return {
\n scope : false, \/\/ we could leave this out, since it’s the default
\n link : function ($scope, $element, $attrs) {
\n setTimeout(function(){
\n $scope.title = ‘Title is changed by Directive scope where scope is false’;
\n $scope.$digest();
\n },7000);
\n }
\n };
\n})
\n.directive(‘directiveScopeValueIsTrue’, function () {
\n return {
\n scope : true,
\n link : function ($scope, $element, $attrs) {
\n setTimeout(function(){
\n $scope.title = ‘Title is changed by Directive scope where scope is true’;
\n $scope.$digest();
\n },10000);
\n }
\n };
\n})
\n.directive(‘myComponent’, function () {
\n return {
\n restrict:’E’,
\n scope : {
\n ‘twoWayBindedTitle’:’=newTitle’,
\n ‘oneWayBindedTitle’:’@readOnlyTitle’
\n },
\n link : function ($scope, $element, $attrs) {
\n setTimeout(function(){
\n $scope.twoWayBindedTitle = ‘Title is changed by Directive scope where scope is object’;
\n $scope.$digest();
\n },13000);
\n },
\n templateUrl:’component’
\n };
\n});
\n[\/js]<\/p>\n

Html Code:<\/strong><\/p>\n

[js]<\/p>\n

Controller(parent) scope
\n <h2>{{title}}<\/h2>
\n <div>
\n <h3>Directive Scope — scope= false<\/h3>
\n <p>Title——->{{title}}<\/p>
\n <\/div>
\n <div>
\n <h3>Directive Scope — scope= true<\/h3>
\n <p>Title——> {{title}}<\/p>
\n <\/div><\/p>\n

<h3>Directive Scope —-> scope= Object<\/h3>
\n <p>Read Only varible(title):——> {{oneWayBindedTitle}}<\/p>
\n <p>Two way Binded variable(title): ——> {{twoWayBindedTitle}}<\/p><\/p>\n

[\/js]<\/p>\n

When you will try to run the above mentioned code, the in output values of the variables will be<\/p>\n

title=\u201cMagic of Scope In Directive\u201d
\noneWayBindedTitle=\u201cMagic of Scope In Directive\u201d
\ntwoWayBindedTitle=\u201cMagic of Scope In Directive\u201d
\n<\/code>
\nAfter 3 seconds:<\/strong><\/p>\n

title=\u201cTitle is changed by Controller scope\u201d
\noneWayBindedTitle=\u201cTitle is changed by Controller scope\u201d
\ntwoWayBindedTitle=\u201cTitle is changed by Controller scope\u201d<\/code><\/p>\n

After 7 seconds:<\/strong><\/p>\n

title=\u201cTitle is changed by Directive scope where scope is false\u201d
\noneWayBindedTitle=\u201cTitle is changed by Directive scope where scope is false\u201d
\ntwoWayBindedTitle=\u201cTitle is changed by Directive scope where scope is false\u201d<\/code><\/p>\n

After 10 seconds:<\/strong><\/p>\n

In Controller and ‘directiveScopeValueIsFalse’ directive Scope:
\ntitle=\u201cTitle is changed by Directive scope where scope is false\u201d<\/code><\/p>\n

In ‘directiveScopeValueIsTrue’ directive scope:
\ntitle=\"Title is changed by Directive scope where scope is true\"
\noneWayBindedTitle=\u201cTitle is changed by Directive scope where scope is false\u201d
\ntwoWayBindedTitle=\u201cTitle is changed by Directive scope where scope is false\u201d<\/code><\/p>\n

After 13 seconds:<\/strong>
\nIn Controller and ‘directiveScopeValueIsFalse’ directive Scope:
\ntitle=\u201cTitle is changed by Directive scope where scope is false\u201d<\/code><\/p>\n

In ‘directiveScopeValueIsTrue’ directive scope:
\ntitle=\"Title is changed by Directive scope where scope is true\"
\noneWayBindedTitle=\u201cTitle is changed by Directive scope where scope is false\u201d
\ntwoWayBindedTitle=\u201cTitle is changed by Directive scope where scope is object\u201d<\/code><\/p>\n

Hope this will help you to understand the ‘scope’ in Custom Directive.<\/p>\n

Read Further on AngularJS Series<\/p>\n