AngularJS

Question

我在使用 AngularJS 和 multipe {{ }} 显示带有 title 属性的工具提示时遇到问题。我正在制作一种日历。

我有这个：

        <tr ng-repeat="horaire in triPlan(planning)">
            <td>A</td>
            <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
            title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
        </tr>

但是当我将鼠标悬停在 TD 元素上时，它会显示“{{rdv.nom}} is {{rdv.age}} 岁”。如果我在 title 属性中只放一个 {{ expression }} ，它就完美了。

如何在标题属性中放入多个{{}}表达式？

更新：问题已解决

大家在下面的回答和评论中可以看到我用的是1.6.4AngularJS版本

ng-attr-title 在 ng-repeat 中对我不起作用 ng-repeat。所以，我真的不知道为什么，但经过一些测试，我把这行代码：

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>

我很惊讶地看到它有效！！ title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}

版本之间存在一些差异，我不知道为什么在旧版本中可以使用而在新版本中却不能。

感谢@georgeawg，最终让它工作的结果。就是将两个或多个插值组合成一个（文字是法语，不用担心）：

title="{{rdv.nom+' a l\'âge :  '+rdv.age+' et vient pour : '+rdv.text}}"

谢谢大家！

Answer 1

使用ng-attr-title。来自 angularJS documentation:

Web browsers are sometimes picky about what values they consider valid for attributes.

If an attribute with a binding is prefixed with the ngAttr prefix (denormalized as ng-attr-) then during the binding it will be applied to the corresponding unprefixed attribute. This allows you to bind to attributes that would otherwise be eagerly processed by browsers...

<td class="abraca" ng-click="selectionHoraire(horaire)" 
    ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
        ng-attr-title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>

Answer 2

好的，感谢@Dragos Paul Marinescu 重定向问题，我发现了一些东西。

我发现如果我使用1.6.4版本的angular.js。工具提示显示不正确，但如果我使用版本 1.2.9 的 angular.min，它的工作完美...

我有这个：

<script type="text/javascript" src="angular.js"></script>

如果我在我的 HTML 中添加这个：

<script src="https://code.angularjs.org/1.2.9/angular.min.js"></script>

现在它完美运行了...谢谢...但我真的不明白为什么会这样。为什么更高版本不能使工具提示起作用？我认为将这两行放在一起以使我的应用程序正常运行是一种肮脏的方式...

Answer 3

将两个插值合并为一个：

<!-- BEFORE
<tr ng-repeat="horaire in triPlan(planning)">
    <td>A</td>
    <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
    title="{{rdv.nom}} is {{rdv.age}} year old">{{rdv.nom}}</td>
</tr>
-->

<!--AFTER -->
<tr ng-repeat="horaire in triPlan(planning)">
    <td>A</td>
    <td class="abraca" ng-click="selectionHoraire(horaire)" ng-repeat="rdv in horaire" data-toggle="tooltip" data-placement="left" 
    title="{{rdv.nom+' is '+rdv.age+' year old'}}">{{rdv.nom}}</td>
</tr>

有关详细信息，请参阅 AngularJS Developer Guide - Expressions

AngularJS - TD 元素的 title 属性中有多个 {{ }}

AngularJS - Multiple {{ }} in title attribute in TD element

html

javascript

jquery-ui-tooltip