Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS

Question

I have read a lot about the use of these symbols in the implementation of custom directives in AngularJS but the concept is still not clear to me.

What does it mean if I use one of the scope values in the custom directive?

var mainApp = angular.module("mainApp", []);
mainApp.directive('modalView',function(){
  return{
     restrict:'E',
     scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true
  }
});

What exactly are we doing with the scope here?

I am also not sure whether "scope:'>'" exists in the official documentation or not. It's been used in my project. (The use of "scope:'>'" was an issue in my project and It has been fixed.)

Solution 1

In an AngularJS directive the scope allows you to access the data in the attributes of the element to which the directive is applied.

This is illustrated best with an example:

<div my-customer name="Customer XYZ"></div>

and the directive definition:

angular.module('myModule', [])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      customerName: '@name'
    },
    controllerAs: 'vm',
    bindToController: true,
    controller: ['$http', function($http) {
      var vm = this;

      vm.doStuff = function(pane) {
        console.log(vm.customerName);
      };
    }],
    link: function(scope, element, attrs) {
      console.log(scope.customerName);
    }
  };
});

When the scope property is used the directive is in the so called "isolated scope" mode, meaning it can not directly access the scope of the parent controller.

In very simple terms, the meaning of the binding symbols is:

someObject: '=' (two-way data binding)

someString: '@' (passed directly or through interpolation with double curly braces notation {{}})

someExpression: '&' (e.g. hideDialog())

This information is present in the AngularJS directive documentation page, although somewhat spread throughout the page.

The symbol > is not part of the syntax.

However, < does exist as part of the AngularJS component bindings and means one way binding.

Solution 2

> is not in the documentation.

< is for one-way binding.

@ binding is for passing strings. These strings support {{}} expressions for interpolated values.

= binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.

& binding is for passing a method into your directive's scope so that it can be called within your directive.

When we are setting scope: true in directive, Angular js will create a new scope for that directive. That means any changes made to the directive scope will not reflect back in parent controller.

Solution 3

< one-way binding

= two-way binding

& function binding

@ pass only strings

Solution 4

When we create a customer directive, the scope of the directive could be in Isolated scope, It means the directive does not share a scope with the controller; both directive and controller have their own scope. However, data can be passed to the directive scope in three possible ways.

1. Data can be passed as a string using the @ string literal, pass string value, one way binding.
2. Data can be passed as an object using the = string literal, pass object, 2 ways binding.
3. Data can be passed as a function the & string literal, calls external function, can pass data from directive to controller.

Solution 5

The AngularJS documentation on directives is pretty well written for what the symbols mean.

To be clear, you cannot just have

scope: '@'

in a directive definition. You must have properties for which those bindings apply, as in:

scope: {
    myProperty: '@'
}

I strongly suggest you read the documentation and the tutorials on the site. There is much more information you need to know about isolated scopes and other topics.

Here is a direct quote from the above-linked page, regarding the values of scope:

The scope property can be true, an object or a falsy value:

• falsy: No scope will be created for the directive. The directive will use its parent's scope.

• true: A new child scope that prototypically inherits from its parent will be created for the directive's element. If multiple directives on the same element request a new scope, only one new scope is created. The new scope rule does not apply for the root of the template since the root of the template always gets a new scope.

• {...} (an object hash): A new "isolate" scope is created for the directive's element. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from its parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.

^{Retrieved 2017-02-13 from https://code.angularjs.org/1.4.11/docs/api/ng/service/$compile#-scope-, licensed as CC-by-SA 3.0}

View more solutions

Comments

[x-yuri]

A better answer in the other question.

[Homer]

What about @? ?

[Jens Bodal]

It should be worth noting that < is not only compatible with components in 1.5, it is also compatible with directives. @Homer the ? denotes the attribute as optional.

[Ram]

It makes no sense for repeating the same answer, sorry not the same answer It seems an extracted info from the above answers.

[Marwen Trabelsi]

sometimes shorter answer tends to be more practical!

[Marwen Trabelsi]

no need to add junk informations if you can explain it in few short lines :)

[N-ate]

This would have been better as an edit to lead either of the higher voted options.