CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveisolate-scope
Deadpool
Deadpool

Reputation: 8240

Use of isolate scope - @, &, and = in a simple Angular Directive

I have made a simple example with Angular.js directives for 'Celebrity Name'. I am reading about isolated scopes @,&,=, but I dont know how to use these in the following simple example to understand their usage and differences. Can someone help me out?

HTML: 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <celebrity></celebrity> 
    <celebrity></celebrity> 
    <celebrity></celebrity> 
    <script> 
        //defining module
        var app = angular.module('myApp',[]);

        //defning Controller
        app.controller('myCtrl',function($scope){
            $scope.name = "Brad Pitt";
        });

        //defining directive
        app.directive('celebrity',function(){
            return{
                restrict: 'E',
                scope: {}, 
                template: '<div>{{name}}</div>'
            }

        });
    </script>
</body> 
</html>

Result: 

Currently all my 3 instances of directive 'celebrity' print 'Brad Pitt'.

Please, someone tell me how to use the 3 types of isolate scope in this simple example.

Upvotes: 0

Views: 1589

Answers (1)

Freezystem
Freezystem

Reputation: 4884

The 3 symbols, have different use :

  • @(read more) : allow you to pass a string from your current scope to the isolated one.

html :

<div ng-controller="myCtrl">
  <my-dir first-attr="Hello" second-attr="{{what}}"></my-dir>
</div>

js :

angular
.controller('myCtrl', function ( $scope ) {
  $scope.what = 'World !'
})
.directive('myDir', function () {
  return {
    scope : {
      firstAttr  : '@',
      secondAttr : '@'
    }
    controller : function ($scope, $log) {
      $log.log($scope.firstAttr + ' ' + $scope.secondAttr);  // logs : 'Hello World !'
    }
  };
});
  • = (read more) : allow you to pass an object that you can use and modify from the isolated scope. The thing is, if you want to modify this object, never change directly the object itself or it will break the two way bindings between your current scope and the isolated one and create two different copies of it (one in the current scope, and one in the isolated). So just alter its properties to keep bindings unless is it what you want.

html :

<div ng-controller="myCtrl">
  <my-dir my-attr="helloWorld"></my-dir>
</div>

js :

angular
.controller('myCtrl', function ( $scope ) {
  $scope.helloWorld = {
    first   : 'Hello',
    second  : 'World !'
  };
})
.directive('myDir', function () {
  return {
    scope : {
      myAttr  : '='
    }
    controller : function ($scope, $log) {
      $scope.myAttr.second = 'Space !';

      $log.log($scope.myAttr.first + ' ' + $scope.myAttr.second);  // logs : 'Hello Space !'
    }
  };
});
  • &(read more) allows you to call a function expression of your current scope from the isolated scope.

html :

<div ng-controller="myCtrl">
  <my-dir my-attr="helloWorld"></my-dir>
</div>

js :

angular
.controller('myCtrl', function ( $scope ) {
  $scope.helloWhat = function ( what ) {
    $log.log('Hello ' + what + ' !');
  };
})
.directive('myDir', function () {
  return {
    scope : {
      myAttr  : '&'
    }
    controller : function ($scope, $log) {
      $scope.myAttr('Angular');      // logs : 'Hello Angular !'
    }
  };
});

Upvotes: 2

Related Questions