KungFu_Zebra KungFu_Zebra - 1 year ago 77
AngularJS Question

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

I have read a lot about the use of these symbols in the implementation of custom directive in AngularJS but the concept is still not clear. I mean,
what does it mean If I use one of scope value in custom directive-

var mainApp = angular.module("mainApp", []);
scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true

What exactly we are doing with the scope here?

As well as I am not sure whether "scope:'>'" exists in official doc or not. It's been used in my project.

(Small ans would be preferable instead of long one)

Thank you.

Answer Source

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 illustrated best with an example:

<div myCustomer 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) {
    link: function(scope, element, attrs) {

When the scope property is used the directive is in the so called " isolate 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 {{}})

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download