在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像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>浏览器有时候会挑剔属性值的有效性。
例如：
<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>因为是不推荐的用法，没做充足的测试，angular核心代码的更改会产生bug
如果我的文章对您有帮助，请用支付宝打赏： 
新闻热点
疑难解答
