The intent is to have a product name appear in the tooltip of a thumbnail. Browsers do not create a tooltip from "ng-title" or "ng-attr-title."
其目的是在缩略图的工具提示中显示产品名称。浏览器不会从“ng-title”或“ng-attr-title”创建工具提示。
We are using AngularJS version 1.0.7. You can prepend any attribute with "ng-" or "ng-attr" and Angular will bind accordingly. However, it doesn't seem to "bind" to the title attirbute of the HTML "A" tag.
我们使用的是AngularJS版本1.0.7。你可以在任何属性前加上“ng-”或“ng-attr”，角将相应绑定。然而，它似乎并没有“绑定”到HTML“A”标记的标题attirbute。
Ex. 1.
例1。
Code: <a title="{{product.shortDesc}}" ...>
代码: <标题= " { {产品。shortdesc } "…>
Expected result: <a title="Canon Powershot XS50 12MB Digital Camera" ...>
Actual result: <a title="{{product.shortDesc}}" ...> We get undesired braces in the tooltip.
实际结果: <标题= " { {产品。shortdesc } }”……我们在工具提示中得到了不需要的括号。< p>
Ex. 2.
例2。
Code: <a ng-attr-title="{{product.shortDesc}}" ...>
代码:< ng-attr-title = " { {产品。shortDesc } } "…>
Expected result: <a title="Canon Powershot XS50 12MB Digital Camera" ...>
Actual result: <a ng-attr-title="Canon Powershot XS50 12MB Digital Camera" ...>
We do not get a plain title attirbute, nor do we get a working tooltip.
我们没有一个简单的标题，也没有一个工作工具提示。
5 个解决方案
#1
199
It looks like ng-attr is a new directive in AngularJS 1.1.4 that you can possibly use in this case.
ng-attr是AngularJS 1.1.4中的一个新指令，您可以在本例中使用它。
<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>
However, if you stay with 1.0.7, you can probably write a custom directive to mirror the effect.
但是，如果您继续使用1.0.7，您可能可以编写一个自定义指令来反映效果。
#2
51
Sometimes it is not desirable to use interpolation on title attribute or on any other attributes as for that matter, because they get parsed before the interpolation takes place. So:
有时候，在标题属性或其他属性上使用插值是不可取的，因为它们在插补之前就被解析了。所以:
<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->
If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers. The attribute will be set only when the binding is done. The prefix is then removed:
如果具有绑定的属性以ngAttr前缀(denormalized as ng-attr-)前缀，那么在绑定期间将应用到相应的unprefixed属性。这使您可以绑定到由浏览器热切处理的属性。属性将只在绑定完成时设置。然后移除前缀:
<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>
(Ensure that you are not using a very earlier version of Angular). Here's a demo fiddle using v1.2.2:
(确保你没有使用较早版本的角)。这里有一个使用v1.2.2的演示小提琴:
小提琴
#3
2
The issue here is your version of AngularJS; ng-attr is not working due to the fact that it was introduced in version 1.1.4. I am unsure as to why title="{{product.shortDesc}}" isn't working for you, but I imagine it is for similar reasons (old Angular version). I tested this on 1.2.9 and it is working for me.
这里的问题是你版本的AngularJS;ng-attr不能正常工作，因为它是在1.1.4版本中引入的。我不确定为什么title="{product "。"并不是为你工作，但我想它是出于类似的原因(旧的角度版本)。我在1.2.9版测试过这个，它对我有效。
As for the other answers here, this is NOT among the few use cases for ng-attr! This is a simple double-curly-bracket situation:
至于这里的其他答案，这并不是ng-attr的少数用例!这是一个简单的双括号情况:
<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />
#4
0
Look at the fiddle here for a quick answer
看这里的小提琴，快速回答
data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"
Displays Title over elements conditionally using Angular JS
使用角度JS有条件地显示元素的标题
#5
-3
The search query model lives in the scope defined by the ng-controller="whatever" directive. So if you want to bind the query model to <title>, you have to move the ngController declaration to an HTML element that is a common parent to both the body and title elements:
搜索查询模型生活在由ng-controller="whatever"指令定义的范围内。因此，如果要将查询模型绑定到
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
< html ng-app = " phonecatApp“ng-controller = " PhoneListCtrl " >
Ref: https://docs.angularjs.org/tutorial/step_03
裁判:https://docs.angularjs.org/tutorial/step_03
#1
199
It looks like ng-attr is a new directive in AngularJS 1.1.4 that you can possibly use in this case.
ng-attr是AngularJS 1.1.4中的一个新指令，您可以在本例中使用它。
<!-- example -->
<a ng-attr-title="{{product.shortDesc}}"></a>
However, if you stay with 1.0.7, you can probably write a custom directive to mirror the effect.
但是，如果您继续使用1.0.7，您可能可以编写一个自定义指令来反映效果。
#2
51
Sometimes it is not desirable to use interpolation on title attribute or on any other attributes as for that matter, because they get parsed before the interpolation takes place. So:
有时候，在标题属性或其他属性上使用插值是不可取的，因为它们在插补之前就被解析了。所以:
<!-- dont do this -->
<!-- <a title="{{product.shortDesc}}" ...> -->
If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers. The attribute will be set only when the binding is done. The prefix is then removed:
如果具有绑定的属性以ngAttr前缀(denormalized as ng-attr-)前缀，那么在绑定期间将应用到相应的unprefixed属性。这使您可以绑定到由浏览器热切处理的属性。属性将只在绑定完成时设置。然后移除前缀:
<!-- do this -->
<a ng-attr-title="{{product.shortDesc}}" ...>
(Ensure that you are not using a very earlier version of Angular). Here's a demo fiddle using v1.2.2:
(确保你没有使用较早版本的角)。这里有一个使用v1.2.2的演示小提琴:
小提琴
#3
2
The issue here is your version of AngularJS; ng-attr is not working due to the fact that it was introduced in version 1.1.4. I am unsure as to why title="{{product.shortDesc}}" isn't working for you, but I imagine it is for similar reasons (old Angular version). I tested this on 1.2.9 and it is working for me.
这里的问题是你版本的AngularJS;ng-attr不能正常工作，因为它是在1.1.4版本中引入的。我不确定为什么title="{product "。"并不是为你工作，但我想它是出于类似的原因(旧的角度版本)。我在1.2.9版测试过这个，它对我有效。
As for the other answers here, this is NOT among the few use cases for ng-attr! This is a simple double-curly-bracket situation:
至于这里的其他答案，这并不是ng-attr的少数用例!这是一个简单的双括号情况:
<a title="{{product.shortDesc}}" ng-bind="product.shortDesc" />
#4
0
Look at the fiddle here for a quick answer
看这里的小提琴，快速回答
data-ng-attr-title="{{d.age > 5 ? 'My age is greater than threshold': ''}}"
Displays Title over elements conditionally using Angular JS
使用角度JS有条件地显示元素的标题
#5
-3
The search query model lives in the scope defined by the ng-controller="whatever" directive. So if you want to bind the query model to <title>, you have to move the ngController declaration to an HTML element that is a common parent to both the body and title elements:
搜索查询模型生活在由ng-controller="whatever"指令定义的范围内。因此，如果要将查询模型绑定到
<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">
< html ng-app = " phonecatApp“ng-controller = " PhoneListCtrl " >
Ref: https://docs.angularjs.org/tutorial/step_03
裁判:https://docs.angularjs.org/tutorial/step_03