在简单的 Angular 指令中使用隔离作用域 - @、& 和 =

Question

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

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'.

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

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

在简单的 Angular 指令中使用隔离作用域 - @、& 和 =

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

javascript

angularjs

angularjs-directive

isolate-scope