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

Question

目的是让产品名称出现在缩略图的工具提示中.浏览器不会从"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反对意见,我们也没有获得有效的工具提示.

Answer 1

它看起来像是AngularJS 1.1.4中的ng-attr一个新指令,在这种情况下你可以使用它.

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

但是,如果你保持1.0.7,你可以写一个自定义指令来镜像效果.

Answer 2

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

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

如果带有绑定的属性以ngAttr前缀为前缀(非规范化为ng-attr-),则绑定期间将应用于相应的未加前缀的属性.这允许您绑定到浏览器急切处理的属性.仅在绑定完成时才设置该属性.然后删除前缀:

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

(确保您没有使用早期版本的Angular).这是使用v1.2.2的演示小提琴:

Fiddle

Answer 3

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

至于这里的其他答案，这不是ng-attr! 这是一个简单的双花括号情况：

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