AngularJS Directive Scope: Understanding ‘@’ and ‘=’ Bindings

In this tutorial, we’ll explore the differences between ‘@’ and ‘=’ bindings, which are commonly used for different purposes in AngularJS directives.

In AngularJS, directives are a powerful feature to create reusable components. When working with directives, understanding the difference between @ and = in the scope configuration is crucial.

Understanding “@” Binding

The @ binding is used for passing strings from the parent scope to the directive’s isolated scope through element attributes. It supports {{}} expressions for interpolated values. When using @, the value in the directive’s scope will be the evaluated value of the DOM attribute.

Example

<my-directive title="{{parentTitle}}"></my-directive>

In this HTML snippet, we are using a custom directive named my-directive and passing the parentTitle variable from the parent scope as an attribute.

In the directive definition, you would use the ‘@‘ binding like this:

.directive('myDirective', function() {
    return {
        scope: {
            title: '@'
        },
        link: function(scope, element, attrs) {
            // Access the passed string via scope.title
        }
    };
});

In the AngularJS directive definition, we specify an isolated scope using the scope property. We use ‘@’ to bind the title property of the isolated scope to the value of the ‘title’ attribute in the HTML.

Inside the link function, scope.title will hold the evaluated value of the ‘title’ attribute, allowing you to work with the passed string in the directive.

Key Points about ‘@’ Binding:

• It passes string values from the parent scope.
• Supports {{}} expressions for interpolated values.
• Attribute values are always treated as strings in the directive’s scope.
• You can perform string concatenation with interpolated values.

Understanding “=” Binding

The = binding establishes a two-way model binding between the parent scope and the directive’s isolated scope. Changes to the model in one scope affect the other, creating a synchronized relationship.

Example

<my-directive model="parentModel"></my-directive>

In this HTML snippet, we are using the same custom directive but passing the parentModel variable from the parent scope using the ‘ng-model’ attribute.

In the directive definition, you would use the ‘=’ binding like this:

.directive('myDirective', function() {
    return {
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs) {
            // Changes to scope.ngModel affect parentModel, and vice versa
        }
    };
});

In the AngularJS directive definition, we use ‘=’ to establish a two-way binding between the ngModel property of the isolated scope and the ‘parentModel’ variable in the parent scope.

Any changes made to scope.ngModel within the directive will automatically reflect in the ‘parentModel’ variable, and vice versa.

Key Points about ‘=’ Binding:

• It establishes a two-way binding between the parent scope and the directive’s isolated scope.
• Any changes to the model in one scope are reflected in the other automatically.

Understanding “&” Binding

The & binding is used for passing methods into the directive’s scope, allowing them to be called within the directive. The method is pre-bound to the directive’s parent scope and supports arguments.

Example

<my-directive callback="parentCallback(name)"></my-directive>

To execute the method parentCallback from inside the directive, you must call $scope.callback({name:'world'}).

Summary

• @ – Attribute string binding for passing strings with support for interpolation.
• = – Two-way model binding for synchronized data between parent and directive scopes.
• & – Callback method binding for passing and executing methods from the parent scope.

Additional Insights

• Using @, you can concatenate strings with interpolated values, which is not possible with =.

<my-directive title="{{parentTitle}} and then some"></my-directive>

• When using @, you may need to use attr.$observe in the link function to access the value asynchronously.
• Direct access to the parent scope is possible by removing scope: {...} if an isolate scope is not required.
• Expression binding (&) is useful for calling functions in the parent scope without the need for data sharing.

Remember, the order of usefulness may vary depending on the specific requirements of your application:

1. =
2. @
3. &

Understanding these bindings will empower you to effectively utilize AngularJS directives in your applications.