140

目的是让产品名称出现在缩略图的工具提示中。浏览器不会从“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属性，也没有得到有效的工具提示。

4

5 回答 5

234

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

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

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

于 2013-08-21T00:15:00.243 回答
53

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

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

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

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

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

Fiddle

于 2013-08-14T11:47:33.933 回答
5

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

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

<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />
于 2018-01-19T18:47:46.427 回答
1

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

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

使用 Angular JS 有条件地在元素上显示标题

于 2018-03-08T10:07:46.390 回答
-4

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

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

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

于 2016-05-22T04:05:52.717 回答