使用隔離範圍 - @，＆和=在一個簡單的Angular指令中

我已經爲'Celebrity Name'做了一個簡單的Angular.js指令。我正在閱讀有關隔離示波器@，&，=，但我不知道如何在以下簡單示例中使用它們來了解它們的用法和差異。有人可以幫我嗎？使用隔離範圍 - @，＆和=在一個簡單的Angular指令中

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種類型的分離範圍，在這個簡單的例子。

來源

2016-02-13 Deadpool

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

來源

2016-02-13 08:41:36 Freezystem

使用隔離範圍 - @，＆和=在一個簡單的Angular指令中

回答

相關問題