angularjs中directive聲明scope對象時修飾符解釋和用法

標籤：angular   directive修飾符解釋和應用   

  在angular中我們定義directive方法時，可以看到

 

return {    restrict: 'AE',    scope: {},    template: '<div></div>',    link: function() {}}

除了代碼中出現的屬性，還有一些其他的屬性可供配置，這裡不作詳述。

今天我們要說的重點是scope欄位。

常規用法設定

scope: {    name: '=',    age: '=',    sex: '@',    say: '&'}

假設我們的hml代碼如下

<div my-directive name="myName" age="myAge" sex="male" say="say()"></div>

對應的controller部分代碼

function Controller($scope) {    $scope.name = 'Pajjket';    $scope.age = 99;    $scope.sex = '我是男的';    $scope.say = function() {        alert('Hello，我是彈出訊息');    };}

那這幾種修飾符的含義又是什麼呢，他們如何關聯起來的

”＝“：指令中的屬性取值為controller中對應$scope上屬性的取值，可用於雙向資料的綁定

”@“：指令中的取值為html中的字面量/直接量；建立一個local scope property到DOM屬性的綁定。因為屬性值總是String類型，所以這個值總是返回一個字串。如果沒有通過@attr指定屬性名稱，那麼本地名稱將與DOM屬性的名稱一直。例如<widget my-attr=”hello {{name}}”>，widget的scope定義為：{localName:’@myAttr’}。那麼，widget scope property的localName會映射出”hello {{name}}"轉換後的真實值。name屬性值改變後，widget scope的localName屬性也會相應地改變（僅僅單向，與下面的”=”不同）。name屬性是在父scope讀取的（不是組件scope）

”&“：指令中的取值為Contoller中對應$scope上的屬性，但是這屬性必須為一個函數回調