Question

我用'Celebrity Name'的Angular.js指令做了一个简单的例子。我正在阅读有关隔离范围@，＆amp;，=的内容，但我不知道如何在以下简单示例中使用这些来了解它们的用法和差异。有人可以帮我吗？

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

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 Directive中使用隔离范围 - @，＆amp;和=

1 个答案: