Directive Scope in AngularJS

Key Concepts

Directive scope in AngularJS determines how a directive interacts with its parent scope. There are three types of scope options available for directives: @, =, and &. Understanding these options is crucial for creating reusable and modular directives.

1. @ (One-Way Text Binding)

The @ scope option is used for one-way text binding. It binds the scope property to the evaluated value of the DOM attribute. Changes in the parent scope are reflected in the directive, but changes in the directive do not affect the parent scope.

Example:

        <my-directive my-text="Hello, AngularJS!"></my-directive>
    

Directive Definition:

        app.directive('myDirective', function() {
            return {
                scope: {
                    myText: '@'
                },
                template: '<p>{{ myText }}</p>'
            };
        });
    

In this example, the myText property in the directive's scope is bound to the value of the my-text attribute in the parent scope.

2. = (Two-Way Data Binding)

The = scope option is used for two-way data binding. It binds the scope property directly to the parent scope property. Changes in the parent scope are reflected in the directive, and changes in the directive are reflected in the parent scope.

Example:

        <my-directive my-model="user.name"></my-directive>
    

Directive Definition:

        app.directive('myDirective', function() {
            return {
                scope: {
                    myModel: '='
                },
                template: '<input ng-model="myModel">'
            };
        });
    

In this example, the myModel property in the directive's scope is bound to the user.name property in the parent scope, allowing for two-way data binding.

3. & (Method Binding)

The & scope option is used for method binding. It allows the directive to call a method in the parent scope. This is useful for triggering actions or events in the parent scope from within the directive.

Example:

        <my-directive my-action="saveUser()"></my-directive>
    

Directive Definition:

        app.directive('myDirective', function() {
            return {
                scope: {
                    myAction: '&'
                },
                template: '<button ng-click="myAction()">Save</button>'
            };
        });
    

In this example, the myAction property in the directive's scope is bound to the saveUser() method in the parent scope, allowing the directive to call this method when the button is clicked.

4. {} (Isolated Scope)

The {} scope option creates an isolated scope for the directive. This means the directive does not inherit from the parent scope and has its own isolated scope. This is useful for creating reusable components that do not interfere with the parent scope.

Example:

        <my-directive></my-directive>
    

Directive Definition:

        app.directive('myDirective', function() {
            return {
                scope: {},
                template: '<p>This is an isolated scope.</p>'
            };
        });
    

In this example, the directive has an isolated scope, meaning it does not inherit any properties or methods from the parent scope.

5. true (Inherit Parent Scope)

The true scope option creates a new scope that inherits from the parent scope. This is the default behavior for directives. Changes in the directive's scope affect the parent scope, and vice versa.

Example:

        <my-directive></my-directive>
    

Directive Definition:

        app.directive('myDirective', function() {
            return {
                scope: true,
                template: '<p>{{ parentProperty }}</p>'
            };
        });
    

In this example, the directive creates a new scope that inherits from the parent scope, allowing it to access the parentProperty from the parent scope.