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

131

目的是使产品名称出现在缩略图的工具提示中。浏览器不会根据“ 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服装，也没有有效的工具提示。

angularjs

— 本沙明
source

228

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

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

但是，如果您使用1.0.7，则可以编写一个自定义指令以反映效果。

— 阮
source

53

有时不希望在标题属性或任何其他属性上使用插值，因为在插值发生之前就已对其进行了解析。所以：

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

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

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

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

— AlwaysALearner
source

3

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

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

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

— 忽略
source

1

在这里查看小提琴以获得快速解答

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

— 桑达拉·普拉布（Sundara Prabu）
source

-4

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

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

— Solidak
source