{"id":14447,"date":"2014-06-30T11:35:36","date_gmt":"2014-06-30T06:05:36","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=14447"},"modified":"2017-08-03T15:59:33","modified_gmt":"2017-08-03T10:29:33","slug":"scope-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/scope-in-angularjs\/","title":{"rendered":"Scope in AngularJS"},"content":{"rendered":"

When we work on AngularJS<\/strong>, scope<\/strong> become very important concept. So today we will understand the Scope in AngularJS<\/a>. In almost every AngularJS<\/strong> Controller<\/strong> we use scope<\/strong> object which is auto injected by AngularJS<\/strong> in $scope<\/strong> named parameter. And that scope<\/strong> gets visible to marked HTML and its inner\/child HTML, because of which HTML can access all the properties and methods which are defined into the scope<\/strong> object. And if anything gets changed in the scope<\/strong>, it will automatically reflect into the HTML and if anything gets changed in HTML it will automatically reflect into scope<\/strong> object via $watch<\/strong> method. In-fact AngularJS provides two-way-data-binding<\/a> with the help of $scope<\/strong> and $watch<\/strong> method. After reading this we might think scope<\/strong> is a very simple concept in AngularJS<\/strong>. But sorry that is not true \ud83d\ude41 . When we write directives<\/strong>, it gets confusing and complicated to understand. But don’t worry, I promise, today after reading this blog you will get to understand scope<\/strong> with directives<\/strong> and you will feel pretty confident with scope<\/strong> \ud83d\ude42 .<\/p>\n

Note: <\/strong>I will discuss scope<\/strong> concept with AngularJS<\/strong> 1.2 version, in older version scope<\/strong> concept was a bit different.<\/p>\n

In a directive<\/strong>, we can use any one among these three values for scope<\/strong> parameter\/field:<\/p>\n

1. false – Parent Scope<\/strong>
\n2. true – Inherited Scope<\/strong>
\n3. Object hash\/{} – Isolated Scope<\/strong><\/p>\n

Lets first make a basic application with small HTML and a Controller<\/strong>(ScopeTestController) then we will understand scope<\/strong> with examples:<\/p>\n

HTML:<\/strong><\/p>\n

[html]
\n<body ng-controller="ScopeTestController">
\n<div>
\n ScopeTestController: {{scopeName}} {{controllerField}}
\n <!– ScopeTestController: ScopeTestController controllerField –>
\n<\/div>
\n<hr\/>
\n<\/body>
\n[\/html]<\/p>\n

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

[js]
\n\/*
\n * Defining ScopeTestController with two scope fields
\n * *\/
\nvar scopeTestApp = angular.module(‘scopeTest’, []);<\/p>\n

function ScopeTestController($scope) {
\n $scope.scopeName = "ScopeTestController";
\n $scope.controllerField = "controllerField";
\n}
\n[\/js]<\/p>\n

1. Scope = false:<\/strong> You might be thinking that directive<\/strong> creates inherited scope<\/strong> by default same as controller<\/strong> but that is not true. Default value of scope<\/strong> for all directives<\/strong> is false and those directives<\/strong> get same scope<\/strong> as of their parent. So whatever changes we make in this scope<\/strong>, will reflect in parent’s scope<\/strong> and changes done in parent scope<\/strong> will reflect to this scope<\/strong> as both are exact same scope object<\/strong>.<\/p>\n

Defining a parent scope directive with parentScopeTestWithTemplate name:<\/strong><\/p>\n

[js]
\nscopeTestApp.directive(‘parentScopeTestWithTemplate’, function () {
\n return {
\n \/\/ Default value of scope is false. ‘scope false’ uses the same scope in which it is defined means Parent Scope.<\/p>\n

link: function (scope) {
\n scope.scopeName = "parentScopeTestWithoutTemplate";
\n },
\n template: ‘parentScopeTestWithTemplate: {{scopeName}} {{controllerField}}’
\n };
\n});
\n[\/js]<\/p>\n

Using parentScopeTestWithTemplate directive in HTML:<\/strong><\/p>\n

[html]
\n<body ng-controller="ScopeTestController">
\n<div>
\n ScopeTestController: {{scopeName}} {{controllerField}} <!– ScopeTestController: parentScopeTestWithoutTemplate controllerField –>
\n<\/div>
\n<!– This uses Parent Scope, i.e the default one. So same scope will be on directive, template\/templateUrl and on HTML. –><\/p>\n

<div parent-scope-test-without-template>
\n sameScopeTestWithoutTemplate: {{scopeName}} {{controllerField}} <!– ScopeTestController: parentScopeTestWithoutTemplate controllerField –>
\n<\/div>
\n<hr\/>
\n<\/body>
\n[\/html]<\/p>\n

You will see HTML print parentScopeTestWithTemplate for scopeName in both the places(inside the directive<\/strong> as well outside the directive<\/strong>) that is because of parent scope directive<\/strong> only, parent scope directive<\/strong> uses same parent scope<\/strong> and it updates the value of scopeName field so it is reflected in both the places. ngShow<\/strong> and ngHide<\/strong> are examples of Parent Scope Directive<\/strong>.<\/p>\n

Note: <\/strong>If we are manipulating the scope<\/strong> then we should not make use of Parent Scope<\/strong>(false for scope<\/strong> parameter\/field) directive<\/strong> because it is a bad practice that we are modifying same scope<\/strong> object at more than one places.<\/p>\n

2. Scope = true:<\/strong> this creates a new inherited scope<\/strong> from parent scope<\/strong>. And this scope<\/strong> gets visible in inner\/child HTML, in directive<\/strong> and in template(if we have defined). If we override any field of parent scope<\/strong> in newly created inherited scope<\/strong> then that updated value will be applied only in inner\/child HTML and template.<\/p>\n

Defining an inherited scope directive with inheritedScopeTestWithTemplate name:<\/strong><\/p>\n

[js]
\nscopeTestApp.directive(‘inheritedScopeTestWithTemplate’, function () {
\n return {
\n \/\/ ‘scope true’ creates a new inherited Scope.<\/p>\n

scope: true,
\n link: function (scope) {
\n scope.scopeName = "inheritedScopeTestWithTemplate";
\n },
\n template: ‘inheritedScopeTestWithTemplate: {{scopeName}} {{controllerField}}’
\n };
\n});
\n[\/js]<\/p>\n

Using inheritedScopeTestWithTemplate directive in HTML:<\/strong><\/p>\n

[html]
\n<body ng-controller="ScopeTestController">
\n<div>
\n ScopeTestController: {{scopeName}} {{controllerField}} <!– ScopeTestController: ScopeTestController controllerField –>
\n<\/div>
\n<!– inherited Scope is visible in template\/templateUrl, directive and inner HTML –><\/p>\n

<div inherited-scope-test-without-template>
\n inheritedScopeTestWithoutTemplate: {{scopeName}} {{controllerField}} <!– ScopeTestController: inheritedScopeTestWithoutTemplate controllerField –>
\n<\/div>
\n<hr\/>
\n<\/body>
\n[\/html]<\/p>\n

3. Scope = {}: <\/strong>This creates new isolated scope<\/strong>. And this scope<\/strong> is visible in directive<\/strong> and in template(if we have defined) only. Parent scope<\/strong> will not get visible in directive<\/strong> and template. Before Angular1.2<\/strong> version, isolated scope<\/strong> was visible in inner\/child HTML, but now after Angular1.2<\/strong> version, isolated<\/strong> is, as its name says, actually completely isolated<\/strong>.<\/p>\n

[js]
\n<strong>Defining an isolated scope directive with isolatedScopeTestWithTemplate name:<\/strong>
\nscopeTestApp.directive(‘isolatedScopeTestWithTemplate’, function () {
\n return {
\n \/\/ ‘scope object hash’ creates a new isolated Scope.<\/p>\n

scope: {},
\n link: function (scope) {
\n scope.scopeName = "isolatedScopeTestWithTemplate";
\n },
\n template: ‘isolatedScopeTestWithTemplate: {{scopeName}} {{controllerField}}’
\n };
\n});
\n[\/js]<\/p>\n

Using isolatedScopeTestWithTemplate directive in HTML:<\/strong><\/p>\n

[html]
\n<!– Isolated Scope get only visible in template\/templateUrl and directive only but is not visible in inner HTML –><\/p>\n

<div isolated-scope-test-with-template>
\n isolatedScopeTestWithoutTemplate: {{scopeName}} {{controllerField}} <!– ScopeTestController: isolatedScopeTestWithoutTemplate –>
\n<\/div>
\n[\/html]<\/p>\n

You will see directive<\/strong> template HTML printed only the value of scopeName but does not print the value of controllerField, because Parent scope<\/strong> does not get visible in template and isolated scope<\/strong> has only scopeName property.<\/p>\n

NOTE: <\/strong>If we do not provide template in isolated scope directive<\/strong> then inner\/child HTML will get parent scope<\/strong> instead of isolated scope<\/strong>, because isolated scope<\/strong> only gets visible in template HTML and in directive. So only parent scope<\/strong> properties and methods will be accessible in inner\/child HTML.
\nParent Scope<\/strong> will not be visible into isolated scope<\/strong>, but many a times we face a requirement when we need to access parent scope<\/strong> properties\/methods into isolated scope<\/strong> then we can use notations symbols<\/strong>, which we will discuss in next blog. But we do not face this issue with parent scope<\/strong> and inherited scope<\/strong> because parent scope<\/strong> is the exactly same scope<\/strong> and inherited scope<\/strong> gets visible in inner\/child HTML.<\/p>\n

MISCELLANEOUS:<\/strong><\/p>\n

1. Two or more directive<\/strong> with template\/templateUrl on same node gives error, so if try below code it gives error.<\/p>\n

[html]
\n<!–<div isolated-scope-test-with-template inherited-scope-test-with-template>
\n isolatedInheritedParentScopeTestWithoutTemplate: {{scopeName}} {{controllerField}}
\n<\/div>
\n<hr\/>–>
\n[\/html]<\/p>\n

2. Suppose If we are marking two directives<\/strong>(A and B) on same HTML node\/element, and template is defined into directive<\/strong> A, then template will get scope<\/strong> of directive<\/strong> A(its own directive<\/strong>) only. And if one directive<\/strong> has inherited scope<\/strong>(suppose A is an inherited scope directive<\/strong>) and one directive<\/strong> has isolated scope<\/strong>(suppose B is an isolated scope directive<\/strong>) then inherited scope<\/strong> will be applied to inner HTML(because after AngularJS 1.2 isolate scope<\/strong> will be visible in directive<\/strong> and its own template only). And if two inherited scope<\/strong> or isolated scope directive<\/strong> are marked on same node(means either both A and B are isolated scope<\/strong> directive<\/strong> or inherited scope<\/strong> directive<\/strong>) then both will get the exactly same inherited<\/strong> or isolated scope<\/strong> respectively.<\/p>\n

[html]
\n<strong>isolated<\/strong> <strong>scope<\/strong> respectively.
\n<div isolated-scope-test-with-template inherited-scope-test-without-template>
\n<\/div>
\n<hr\/>
\n<div isolated-scope-test-without-template inherited-scope-test-with-template>
\n<\/div>
\n<hr\/>
\n<div isolated-scope-test-without-template inherited-scope-test-without-template>
\n ScopeTestController: {{scopeName}} {{controllerField}}
\n<\/div>
\n<hr\/>
\n<div inherited-scope-test-without-template inherited-scope-test2-without-template>
\n ScopeTestController: {{scopeName}} {{controllerField}}
\n<\/div>
\n<hr\/>
\n[\/html]<\/p>\n

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

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