angularjs於directive聲明scope說明什麼時候以及如何使用對象修飾符

  於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上的屬性。但是這屬性必須爲一個函數回調

版權聲明：本文博主原創文章。博客，未經贊成不得轉載。