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

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

我们正在使用AngularJS版本1.0.7。你可以用“ng-”或“ng-attr”来预定任何属性，而Angular会相应地绑定。但是，它似乎没有“绑定”HTML标签的标题属性。

防爆。 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，也没有得到一个工作提示。

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

但是，如果你使用1.0.7，你可以写一个自定义指令来镜像效果。

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

有时，对标题属性或任何其他属性使用插值是不可取的，因为它们在插值发生之前被parsing。所以：

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

如果带有绑定的属性前缀为ngAttr前缀（非规格化为ng-attr-），则在绑定期间将应用于相应的无前缀属性。这使您可以绑定到浏览器正在热切处理的属性。该属性将仅在绑定完成时设置。然后删除前缀：

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

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

小提琴

searchquery模型位于由ng-controller="whatever"指令定义的范围内。所以如果你想将查询模型绑定到<title> ，你必须把ngController声明移动到一个HTML元素，这个元素是body元素和title元素的通用父元素：

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

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