Angularjs directives and isolate scope

Posted by Andrey Marushkevych on May 14, 2014

Angular documentation for Isolate Scope Properties @, =, and & was always very confusing but now its also hard to find. They replaced it with gentle introduction. So the actual in-depth guide is moved to API Reference for $compile service.

So, in a nutshell:

  • @ binds a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings. As the value of DOM attribute changes so will local scope property.
  • = bi-directionally binds an object
  • & provides a way to execute an expression in the context of parent scope. It wraps a function around the expression. If expression is a function call like increment(amount), we can pass arguments to the function via named parameters hash: {amount: 22}. Here is an example:
// button directive
module.directive('button', buttonDirective);

function buttonDirective(){
  return {
    scope: {
      action: '&'
    },
    template: '<button ng-click="action({amount: 22})"> Add 22 </button>'
  };
}
<div button action='increment(amount)'></div>
// controller
function controller($scope){
  $scope.increment = function(amount){
    // this is called with 22 when button is clicked
  };
}


blog comments powered by Disqus