如何让 AngularJS 绑定到 A 标记的 title 属性？

小开

有时在 title 属性或任何其他属性上使用插值是不可取的，因为它们在插值发生之前就被解析了，所以:

<!-- dont do this -->
<!-- <a title="\{\{product.shortDesc}}" ...> -->

如果具有绑定的属性前缀为 ngAttr 前缀(反规范化为 ng-attr -) ，那么在绑定期间将应用于相应的无前缀属性。这允许您绑定到浏览器可能会急切处理的属性。只有在绑定完成时才会设置该属性。然后删除前缀:

<!-- do this -->
<a ng-attr-title="\{\{product.shortDesc}}" ...>

(请确保您没有使用更早版本的 Angular)下面是一个使用 v1.2的演示小提琴:

小开

最佳答案

看起来 ng-attr是 AngularJS 1.1.4中的一个新指令，您可以在这种情况下使用它。

<!-- example -->
<a ng-attr-title="\{\{product.shortDesc}}"></a>

但是，如果您继续使用1.0.7，您可能会编写一个自定义指令来反映这种效果。

小开

搜索 query模型位于由 ng-controller="whatever"指令定义的范围内。因此，如果您想将查询模型绑定到 <title>，您必须将 ngController声明移动到一个 HTML 元素，该元素是 body 和 title 元素的公共父元素:

< html ng-app = “ phonecatApp”ng-controller = “ PhoneListCtrl”>

小开

这里的问题是您的 AngularJS 版本; 由于 ng-attr是在1.1.4版本中引入的，所以它不能正常工作。我不确定为什么 title="\{\{product.shortDesc}}"不为你工作，但我想它是类似的原因(旧角版本)。我在1.2.9版本上测试过，它对我很有效。

至于这里的其他答案，这不是为数不多的 ng-attr用例之一！这是一个简单的双曲括号情况:

<a title="\{\{product.shortDesc}}" ng-bind="product.shortDesc" />

小开

看看这里的小提琴就知道答案了

data-ng-attr-title="\{\{d.age > 5 ? 'My age is greater than threshold': ''}}"