AngularJS - TD元素中的标题属性中的多个{{}}

Question

我在使用带有 multipe {{ }} 的 AngularJS 显示带有 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 }}，它就可以完美地工作。

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

更新：问题已解决

您可以在下面的答案和 cmets 中看到我使用的是 1.6.4 AngularJS 版本。

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 浏览器有时对它们认为对属性有效的值很挑剔。

如果具有绑定的属性以 ngAttr 前缀（非规范化为 ng-attr-）作为前缀，则在绑定期间它将应用于相应的无前缀属性。这允许您绑定到原本会被浏览器急切处理的属性...

<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

将两个插值合二为一：

<!-- 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

Answer 3

好的， 感谢@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>

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