Custom Directive Scope in AngularJS

1. Custom Directive Scope in AngularJS
2. Use the Scope: False or Shared Scope in AngularJS
3. Use the Scope: True or Inherited Scope in AngularJS
4. Use the Scope : {} or Isolated Scope in AngularJS
5. Use the @ or One-Way Binding in AngularJS
6. Use the = or Two-Way Binding in AngularJS
7. Use the & or Method Binding in AngularJS

The scope allows AngularJS to ensure that another object can’t accidentally change an object. It does this by creating a new copy of the object and storing it in memory.

The scope is also used as a security measure, preventing unauthorized users from accessing objects on the page. This article will cover different scope-related options and tactics, such as using a shared scope, inheriting parent scope, and isolated scope.

Custom Directive Scope in AngularJS

The AngularJS scope is one of the essential concepts in AngularJS. The scope is used to determine the visibility of specific variables and functions.

Let’s talk about direction; if we want a unique function in an application and want to utilize it throughout the entire application section, we must write a code set. It’s referred to as directives in Angular.

A scope is linked with all directives. This scope is used to access data and methods within the template.

Directives do not establish their scope by default unless specifically set. As a result, directives treat the scope of their parent as their own.

By giving a configuration object defined as the directive definition object to AngularJS, we can change the default scope of directives. Let’s deep dive into the topic.

Use the Scope: False or Shared Scope in AngularJS

It generates a single scope that is identical to its parent scope, which implies that any changes to the parent’s scope will be reflected in the directive’s scope and vice versa is also true.

JavaScript:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: false,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML Code:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

In this example, when we alter the name of the textbox, the header name changes as well. The directive utilizes its parent scope because the DDO doesn’t include it here.

As a result, any changes we make within the directive are also applied in the parent scope. Click here to check the working of the code as mentioned above.

Use the Scope: True or Inherited Scope in AngularJS

It’s a derived scope instead of a parent’s scope. The changes will not be reflected in the controller scope if you modify the directive scope.

However, modifications to the parent scope will be reflected in the directive scope.

JavaScript Code:

var app = angular.module("Demo",[]);
app.directive("myDirective", function(){
    return {

        scope: true,
        template: "<div>Name : {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML Code:

<div ng-app="Demo">

    <div ng-controller="Hello">
        <h3 ng-click="reverseName()">Hello Dear {{name}}, Click here to change your name</h3>
        <div my-directive class='directive'></div>
    </div>
</div>

In this example, the value of the parent scope will be displayed on the screen. But what happens if we modify the value in the text box?

Then only the child scope will be changed. It indicates that the parent scope has remained unchanged.

Click here to check the working of the code as mentioned above.

Use the Scope : {} or Isolated Scope in AngularJS

The isolated scope is one of the most significant aspects. The directive will construct a new scope object here, but the parent scope will not inherit; therefore, it will not know the parent scope.

However, how can we retrieve the data from it, and how can we edit it if we don’t connect with the parent scope? The answer is to put the entity’s attribute in DDO; however, you need to set attributes in the directive first.

We use three prefixes in isolated scope to help link the controller’s property or methods to directives. Let’s have a look at how this works.

When a directive discovers any prefixes in its scope property in DDO, it double-checks them in the directive declaration in the HTML page where the directive is invoked using the attribute declared.

After any of the prefixes, we can give a different attribute name to alter the name.

AngularJS has three types of prefixes.

1. @ - One-way binding
2. = - Direct model binding / two-way binding
3. & - Method binding

Use the @ or One-Way Binding in AngularJS

One-Way binding means when a parent sends something to the directive scope via the attribute reflected in the directive. However, any changes to the directive will not be reflected in the parent.

String values are passed using the @ symbol.

JavaScript Code:

var app = angular.module("Demo",[]);


app.directive("myDirective", function(){
    return {

 scope: {
            name: '@'
        },
        template: "<div>Name :  {{name}}</div>"+
        "Write your Name : <input type='text' ng-model='name' />"
    };
});

app.controller("Hello",function($scope){
    $scope.name = "Adil";
    $scope.reverseName = function(){
    $scope.name = $scope.name.split('').reverse().join('');
    };
});

HTML Code:

<div ng-app="Demo">

    <div ng-controller="Hello">

        <div my-directive class='directive'></div>

    </div>
</div>
<div ng-app="Demo"></div>

Click here to check the live demonstration of the code above.

Use the = or Two-Way Binding in AngularJS

It’s used to pass an object to a directive rather than a string. This entity could be modified from both the parent and directive sides.

That is why it is referred to be two-way. To use two-way binding, you need to put to = sign in the place of scope.

scope: {

 name: "="

}

Use the & or Method Binding in AngularJS

It is used to connect the method of any parent to the directive scope. We can use this whenever we call the directive’s parent methods.

It’s used to invoke functions that aren’t currently in scope. To use the method binding, you need to put the & symbol in place of the scope.

scope: {
     name: "&"
}

That’s it; if you are still confused, read the official documentation by clicking here.