angular學習（九）—— 插補

2024-04-27 15:05:16

字體：大中小

來源：轉載

供稿：網友

插補和數據綁定

在angular中，嵌入式表達式插補標記被用于數據綁定文本節點和屬性值。

一個嵌入式表達式插補標記的例子：

<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>

文本和屬性綁定如何運行

在編譯的過程中，編譯器會使用$interpolate服務去查看文本節點和元素屬性是否包含嵌入式表達式插補標記。如果有的話，就會增加一個interpolateDirective在這個節點上，并且在插補的計算函數上注冊watches，作為常規digest循環的一部分，會更新對應的文本節點和屬性值。

注意，interpolateDirective的優先級為100，并且在預鏈接函數中設置watch。

字符串表達式如何運算

如果插補值不是string，那么它這樣運算：

undefined和null被轉換成''如果值是一個對象，但不是Number，Date，Array，$interpolate將查找對象自定義的toString()函數，自定義意味著myObject.toString !== Object.PRototype.toString.如果以上都不是，將會采用JSON.stringify

boolean屬性的綁定

像disabled這樣的屬性就叫做boolean屬性，因為存在就是true，不存在就是false，對它們不能使用普通的屬性綁定，因為HTML規范沒有要求瀏覽器保存boolean屬性值。這意味著，我們在boolean屬性上放一個angularjs插補表達式，這個綁定信息會丟失掉，因為瀏覽器會忽略這個屬性值。

在下面的例子中，插補信息會被忽略掉，瀏覽器會簡單解釋為屬性是存在的，這樣按鈕永遠都是禁用狀態。

Disabled: <input type="checkbox" ng-model="isDisabled" /><button disabled="{{isDisabled}}">Disabled</button>

因此，AngularJS為這些boolean屬性提供了一個特殊的ng為前綴的指令，這些屬性包括：disabled, required, selected, checked, readOnly 和 open。

當boolean屬性的表達式計算為真時，這些指令將設置一個相應的true。

Disabled: <input type="checkbox" ng-model="isDisabled" /><button ng-disabled="isDisabled">Disabled</button>

用ngAttr綁定任意屬性

瀏覽器有時候會挑剔屬性值的有效性。

例如：

我們希望瀏覽器可以進行綁定，但是我們看控制臺就會發現Error: Invalid value for attribute cx="{{cx}}"，因為SVG DOM API的限制，你不能簡單的寫cx="{{cx}}".

用ng-attr-cx，你就可以解決這個問題。

如果帶有綁定的屬性以ngAttr為前綴，綁定的時候就會應用為無前綴的屬性，這將允許你綁定那些會被瀏覽器處理的屬性。當你使用ngAttr時，$interpolate的allOrNothing將會啟用，如果插補表達式的運算結果為undefined，這個屬性就會被移除，不會增加到元素中。

上面的例子使用ngAttr重寫一下:

如果下修改一些駱駝命名法的屬性，比如在svg元素中的viewBox，可以用下劃線的方式來綁定這些屬性：

綁定viewBox應該這樣寫：

有一些屬性當使用插補時也有不少問題，同樣可以使用ngAttr前綴，已知的這些屬性如下：

size ，<select>元素placeholder ，Internet Explorer 10/11 中的<textarea>元素type ，Internet Explorer 11中的<button>元素value ，Internet Explorer 11中的<progress>元素