角度插值表达式未计算答案

【问题标题】：Angular interpolation expression not evaluated角度插值表达式未计算
【发布时间】：2014-03-12 19:17:59
【问题描述】：

我遇到了角度插值问题。

我有一个如下所示的指令模板：

<div class="autocomplete {{attrs.class}}" id="{{attrs.id}}">
     <input type="text" {{attrs.autofocus | toAutofocusText}} ng-model="searchParam" placeholder="{{attrs.placeholder}}"/>
     ...
</div>

我遇到的问题是这个表达式没有被评估：

{{attrs.autofocus | toAutofocusText}}

但是，如果我把它改成这样：

x="{{attrs.autofocus | toAutofocusText}}"

它确实得到了评估。

有人能解释一下为什么会这样吗？我猜这是相当基本的东西，但我在谷歌上找不到任何东西。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

所以答案是属性不会在该级别上进行插值。或者更具体地说，在编译 HTML 时，Angular 会处理 DomElements。具有以{{ 开头的属性的Dom 元素不是有效属性，这就是$compile 不知道它的原因。但是，它现在确实处理属性值或 Dom 元素内容中的此类表达式。

【讨论】：

【解决方案2】：

请记住，Angular 是（他们说）为应用程序编写的 html。数据绑定语法被评估为 html。说：

x="{{attrs.autofocus | toAutofocusText}}"

是不同的，因为现在您谈论的是正在评估的属性的属性，而不是 html 元素中的一些未知字符。

我要推荐的另一件事是你考虑使用 ng-class 来操作类的东西：

http://docs.angularjs.org/api/ng/directive/ngClass

【讨论】：

谢谢，这就解释了。就我而言，我想对输入元素应用角度指令。我刚刚发现我可以使用一个函数来解析一个模板并让它工作。我现在不再尝试在模板中使用表达式，而是在模板函数中连接字符串。