转载请写明来源地址：http://www.52php.cn/article/p-waquwpfk-bph.html

插补和数据绑定

在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绑定任意属性

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

例如：

<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重写一下:

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

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

绑定viewBox应该这样写：

<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指令去更改属性的内容。

在表达式中内嵌插补

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

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

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

<div ng-show="getForm($index).$invalid"></div>

function getForm(index) {
  return $scope['form' + index];
}

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

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

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

• 它增加了标记的复杂性
• 不能保证适用于所有指令，因为插补本身就是一个指令，如果其他指令在插补指令之前访问数据，那么它将得到一个插补标记而不是数据
• 对性能优影响，因为会增加额外到watch到scope中

• 因为是不推荐的用法，没做充足的测试，angular核心代码的更改会产生bug

  
  
  
  
  如果我的文章对您有帮助，请用支付宝打赏：