Over a million developers have joined DZone.

Behaviour of Scope in AngularJS Directives

DZone's Guide to

Behaviour of Scope in AngularJS Directives

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Directive is the coolest and most crucial feature provided by AngularJS. Use of the scope property in directives makes the process of writing a directive challenging. The behavior of the scope depends on the way it is assigned in the directive. Following are different scenarios of using scope inside a directive:

  • The scope is not assigned or set to false
  • The scope is set to true
  • Isolated scope
Following is a simple controller with just one value assigned to scope that we will be using in a sample page:
var app = angular.module("myApp", []);
app.controller("SampleCtrl", ['$scope', function ($scope) {
    $scope.val = 0;
Let’s have a look at each of the above scenarios individually.

Scope is not assigned or set to false:
Consider the following directive:

app.directive("dirWithoutScope", function () {
        link: function (scope, elem, attrs, ctrl) {
Since the directive is not making any changes, the scope of this directive remains the same as the scope of its parent element. The statement in the link function modifies the value of the property value, which is set in the controller. Both of the following span elements will display the same value, which is 20.
<span dir-without-scope>{{val}}</span>

Scope is set to true:
In this case, the scope of the directive would be prototypically inherited from the scope of its parent element. Let’s consider the following directive:

app.directive("dirWithScopeTrue", function () {
As the scope is prototypically inherited, properties of the parent scope are accessible using this scope. The following span tag will still hold the value assigned to the parent scope:
<span dir-with-scope-true>{{val}}</span>
Let’s complicate the scenario a bit by adding the following link function to the above directive:
link: function (scope, elem, attrs, ctrl) {
The value 25 isn’t assigned to the val property in the parent scope. Instead, this statement creates a new property in the child scope and assigns the value to it. The span element created above will hold the value 25 now.

If the value is set through the $parent property of the scope, the value gets assigned to the parent scope.

If the link function statement is replaced with the above statement, the values in all span elements will change to 25.

Isolated scope:
If a new scope is created in the directive, the scope doesn’t inherit from the parent scope anymore. Properties of the parent scope are not accessible with the new scope. The following directive contains an isolated scope:

app.directive("dirWithBlankScope", function(){
        link:function(scope, elem, attrs, ctrl){
The assignment statement in the link function creates a val property in the new scope. It doesn’t alter the value of the property assigned in the controller or the previous directive. The following span prints the value of the new property:
<span dir-with-new-scope>{{val}}</span>
Properties of the scope of the parent element are still accessible through the $parent property of the scope.
<span dir-with-new-scope>{{$parent.val}}</span>

Happy coding!

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}