angular学习(九)—— Interpolation


在angular中,嵌入式表达式插补标记被用于数据绑定文本节点和属性值。

插补和数据绑定

在angular中,嵌入式表达式插补标记被用于数据绑定文本节点和属性值。

一个嵌入式表达式插补标记的例子:

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

文本和属性绑定如何运行

在编译的过程中,编译器会使用$interpolate服务去查看文本节点和元素属性是否包含嵌入式表达式插补标记。如果有的话,就会增加一个interpolateDirective在这个节点上,并且在插补的计算函数上注册watches,作为常规digest循环的一部分,会更新对应的文本节点和属性值。

注意,interpolateDirective的优先级为100,并且在预链接函数中设置watch。

字符串表达式如何运算

如果插补值不是string,那么它这样运算:

  • undefinednull被转换成''
  • 如果值是一个对象,但不是NumberDateArray,$interpolate将查找对象自定义的toString()函数,自定义意味着myObject.toString !== Object.prototype.toString.
  • 如果以上都不是,将会采用JSON.stringify

boolean属性的绑定

disabled这样的属性就叫做boolean属性,因为存在就是true,不存在就是false,对它们不能使用普通的属性绑定,因为HTML规范没有要求浏览器保存boolean属性值。这意味着,我们在boolean属性上放一个angularjs插补表达式,这个绑定信息会丢失掉,因为浏览器会忽略这个属性值。

在下面的例子中,插补信息会被忽略掉,浏览器会简单解释为属性是存在的,这样按钮永远都是禁用状态。

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

因此,AngularJS为这些boolean属性提供了一个特殊的ng为前缀的指令,这些属性包括:disabled, required, selected, checked, readOnly 和 open。

当boolean属性的表达式计算为真时,这些指令将设置一个相应的true。

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

用ngAttr绑定任意属性

浏览器有时候会挑剔属性值的有效性。

例如:

1
2
3
<svg>
<circle cx="{{cx}}"></circle>
</svg>

我们希望浏览器可以进行绑定,但是我们看控制台就会发现Error: Invalid value for attribute cx="{ {cx} }",因为SVG DOM API的限制,你不能简单的写cx="{ {cx} }".

用ng-attr-cx,你就可以解决这个问题。

如果带有绑定的属性以ngAttr为前缀,绑定的时候就会应用为无前缀的属性,这将允许你绑定那些会被浏览器处理的属性。当你使用ngAttr时,\$interpolate的allOrNothing将会启用,如果插补表达式的运算结果为undefined,这个属性就会被移除,不会增加到元素中。

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

1
2
3
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>

如果下修改一些骆驼命名法的属性,比如在svg元素中的viewBox,可以用下划线的方式来绑定这些属性:

绑定viewBox应该这样写:

1
2
<svg ng-attr-view_box="{{viewBox}}">
</svg>

有一些属性当使用插补时也有不少问题,同样可以使用ngAttr前缀,已知的这些属性如下:

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

已知问题

动态改变插补值

你应该避免动态改变插补字符串的内容(例如属性值或文本节点),当原始字符串正在运算时,你的改变就会被覆盖。这个限制适用于用javascript直接改变和用指令间接改变。

例如,你不应该在style属性值中使用插补style="color: { { 'orange' } }; font-weight: { { 'bold' } };")的同时,使用ngStyle指令去更改属性的内容。

在表达式中内嵌插补

在表达式中嵌入式插补是个不好的做法:

1
<div ng-show="form{{$index}}.$invalid"></div>

你可以将复制表达式的计算委托给scope,例如:

1
<div ng-show="getForm($index).$invalid"></div>
1
2
3
function getForm(index) {
return $scope['form' + index];
}

你也可以用this访问scope,例如

1
<div ng-show="this['form' + $index].$invalid"></div>

为什么不建议将插补和表达式混合

  • 它增加了标记的复杂性
  • 不能保证适用于所有指令,因为插补本身就是一个指令,如果其他指令在插补指令之前访问数据,那么它将得到一个插补标记而不是数据
  • 对性能优影响,因为会增加额外到watch到scope中
  • 因为是不推荐的用法,没做充足的测试,angular核心代码的更改会产生bug
文章目录
  1. 1. 插补和数据绑定
    1. 1.1. 文本和属性绑定如何运行
    2. 1.2. 字符串表达式如何运算
    3. 1.3. boolean属性的绑定
    4. 1.4. 用ngAttr绑定任意属性
  2. 2. 已知问题
    1. 2.1. 动态改变插补值
    2. 2.2. 在表达式中内嵌插补
|