0

我用 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 种类型的隔离范围。

4

1 回答 1

2

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

  • @（阅读更多）：允许您将字符串从当前范围传递到孤立的范围。

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

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 !'
    }
  };
});
  • &（阅读更多）允许您从隔离范围调用当前范围的函数表达式。

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 !'
    }
  };
});
于 2016-02-13T08:41:36.313 回答