AngularJS 文件閱讀scope指令你知道多少？ angularjs文件所閱讀的scope指令的詳解

本篇文章主要的介紹了關於angularjs文檔閱讀的scope指令，本文詳細的解讀了angularjs文檔閱讀的scope指令的完整使用方法。現在就讓我們一起來看這篇文章吧

scope

指令，是AngularJS最常用的功能，讓我們很容易在前台實現程式碼重複使用。而指令最精髓的地方，就在於指令內外域scope的互動方式。

本文屬於一篇對文件的翻譯加上一些自己對此的理解，因水平有限，可能某些地方翻譯的不通順，或者翻譯的錯了，歡迎大家批評指正。本文對scope的用法以及描述均翻譯自AngularJS英文文檔，文檔地址：AngularJS 官方文檔

scope屬性的值可以是false，可以是true，也可以是物件。

false

false：這是指令scope的預設屬性，不會為指令建立一個scope，這個指令會使用他的父scope。

true

true：為指令建立一個從父scope原型繼承的子scope。

物件

{key: value}：為指令建立一個新的隔離scope，隔離scope和通常的scope的差別在於：隔離scope不從父scope做原型繼承。

不會從父scope做原型繼承，這對於建立可重複使用的元件非常有用，可重複使用元件不應該從父scope讀取或修改屬性。

注意：一個有隔離scope但是沒有template或templateUrl的指令不會將隔離scope應用到它的子元素。 這是在文件上寫的，目前還沒有理解到究竟是什麼意思。

也可能是我翻譯的不對，以下是原文：

Note that an isolate scope directive without a template or templateUrl will not apply the isolate scope to its children elements.

隔離物件定義了源自於指令元素的屬性的本機scope屬性集合。

scope綁定

以下幾種綁定都是可以加參數的。

範例：

scope: {
    name: '=nameAttr'
}

綁定的就是：<test name-attr="'hello'"></test>。

scope: {
    name: '='
}

綁定的就是：<test name="'hello'"></test>。

字串綁定

@/@attr：綁定本地scope的屬性到DOM 屬性的值，這個結果總是一個字串，因為DOM屬性就是字串。隨著DOM屬性值的改變，指令scope上的屬性也會改變，因為這個屬性是在它的父scope上讀取的。

雙向綁定

=/=attr：本地scope的屬性和傳遞到屬性上的表達式建立雙向綁定，該表達式是在父scope的範圍內計算的。如果綁定的表達式不是可賦值的，或者它不是可選的但是指令中沒有傳，$compile:noassign異常就會被拋出，因為它無法和父scope同步。

預設地，$watch方法通常用來監聽改變，並且根據物件的位址來進行相等判斷。然而，如果一個物件位址或陣列位址被傳遞到綁定的表達式中，比較的方法就是透過判斷值是否相等。也可以使用=*/=*attr和$watchCollection來進行淺監聽。

這段話還不是很理解，在StackOverflow找到了一個可靠的回答，但還不是很明白。 AngularJS =* 問題

（想看更多就到PHP中文網angularjs學習手冊中學習）

單向綁定

/<code><attr>：在本地<code>scope和傳遞到DOM屬性上的表達式之間建立單向綁定，所有在DOM屬性上表達式的改變會反映在scope的屬性上，但是scope屬性上的改變不會反映在DOM屬性的表達式上。

但是這有兩個警告：

1.單向綁定不是將父scope的值拷貝到隔離scope 上，而是簡單的設定相同的值。如果你傳的是一個對象，那在隔離scope上對該對象的改變會反映到父scope上，因為兩者引用同一個對象。

2.单向绑定监视的是父值地址的改变。这意味着在父值上的$watch仅仅在引用的地址发生改变时才会生效。大多数情况下，这是不需要关心的。但是必须要知道如果你单向绑定了一个对象，然后会改变隔离scope上的对象，如果改变了父scope上的该对象的一个属性，这个改变是不会传递到隔离scope上的，因为这个对象的地址没有改变，除非你赋值一个新的对象。

如果不打算将隔离scope的改变传播会父节点，单向绑定是很有用的。

绑定方法

&/&attr：在父scope提供一个可执行的表达式，就是传一个方法。

设置可选

所有的绑定(@, =, )都能通过在表达式上添加<code>?设置为可选的，这个标志必须在绑定模式之后，属性名称之前。

可选和不可选的区别在于：

• 绑定是可选的，这个属性不会被定义。

• 绑定不是可选的，这个属性被定义了。

以下是AngularJS文档中对可选指令的示例代码。

app.directive('testDir', function() {
  return {
    scope: {
      notoptional: '=',
      optional: '=?',
    },
    bindToController: true,
    controller: function() {
      this.$onInit = function() {
        console.log(this.hasOwnProperty('notoptional')); // true
        console.log(this.hasOwnProperty('optional')); // false
      }
    }
  };
});

本篇文章到这就结束了（想看更多就到PHP中文网angularjs学习手册中学习），有问题的可以在下方留言提问

以上是AngularJS 文件閱讀scope指令你知道多少？ angularjs文件所閱讀的scope指令的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！