在简单的 Angular 指令中使用隔离范围 - @、& 和 =答案

【问题标题】：Use of isolate scope - @, &, and = in a simple Angular Directive在简单的 Angular 指令中使用隔离范围 - @、& 和 =
【发布时间】：2016-02-13 07:48:15
【问题描述】：

我用 Angular.js 指令为“名人姓名”做了一个简单的例子。我正在阅读有关隔离范围 @,&,= 的信息，但我不知道如何在以下简单示例中使用它们来了解它们的用法和区别。有人可以帮我吗？

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>

结果：

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

请有人告诉我如何在这个简单的例子中使用这 3 种类型的隔离作用域。

【问题讨论】：

标签： javascript angularjs angularjs-directive isolate-scope

【解决方案1】：

这3个符号，有不同的用途：

@(read more) ：允许您将字符串从当前范围传递到隔离范围。

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) ：允许您传递可以在隔离范围内使用和修改的对象。问题是，如果你想修改这个对象，永远不要直接改变对象本身，否则会破坏双向绑定在当前范围和隔离范围之间创建两个不同的副本（一个在当前范围内，一个在隔离范围内）。所以只要改变它的属性来保持绑定，除非你想要它。

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) 允许您从隔离范围调用当前范围的函数表达式。

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 !'
    }
  };
});

【讨论】：

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 在 $apply 块中调用该代码有帮助吗？如果是，为什么？