如何让 AngularJS 绑定到 A 标签的 title 属性？答案

【问题标题】：How do you get AngularJS to bind to the title attribute of an A tag?如何让 AngularJS 绑定到 A 标签的 title 属性？
【发布时间】：2013-08-14 11:46:32
【问题描述】：

目的是让产品名称出现在缩略图的工具提示中。浏览器不会从“ng-title”或“ng-attr-title”创建工具提示。

我们使用的是 AngularJS 版本 1.0.7。您可以在任何属性前面加上“ng-”或“ng-attr”，Angular 会相应地绑定。但是，它似乎没有“绑定”到 HTML“A”标签的标题属性。

例如。 1.

代码：<a title="{{product.shortDesc}}" ...>

预期结果：<a title="Canon Powershot XS50 12MB Digital Camera" ...>

实际结果：<a title="{{product.shortDesc}}" ...> 我们在工具提示中得到了不需要的大括号。

例如。 2.

代码：<a ng-attr-title="{{product.shortDesc}}" ...>

预期结果：<a title="Canon Powershot XS50 12MB Digital Camera" ...>

实际结果：<a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>

我们没有得到一个普通的title attirbute，也没有得到一个有效的工具提示。

【问题讨论】：

标签： angularjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

有时不希望在标题属性或任何其他属性上使用插值，因为它们在插值发生之前被解析。所以：

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

如果具有绑定的属性以 ngAttr 前缀（非规范化为 ng-attr-）作为前缀，则在绑定期间将应用于相应的未加前缀的属性。这允许您绑定到浏览器会急切处理的属性。仅当绑定完成时才会设置该属性。然后删除前缀：

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

（确保您使用的不是早期版本的 Angular）。这是一个使用 v1.2.2 的演示小提琴：

Fiddle

【讨论】：

【解决方案3】：

这里的问题是你的 AngularJS 版本； ng-attr 无法正常工作，因为它是在 1.1.4 版中引入的。我不确定为什么 title="{{product.shortDesc}}" 不适合你，但我想这是出于类似的原因（旧的 Angular 版本）。我在 1.2.9 上对此进行了测试，它对我有用。

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

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

【讨论】：

【解决方案4】：

查看这里的小提琴以获得快速答案

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

Displays Title over elements conditionally using Angular JS

【讨论】：

【解决方案5】：

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

<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">

参考：https://docs.angularjs.org/tutorial/step_03

【讨论】：