转载请写明来源地址：http://www.jb51.cc/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>元素
已知问题
@H_704_301@动态改变插补值你应该避免动态改变插补字符串的内容（例如属性值或文本节点），当原始字符串正在运算时，你的改变就会被覆盖。这个限制适用于用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>
