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

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.age}}年{{rdv.age}}岁”。 而且，如果我在title属性中仅放置一个{{expression}}，它会完美地工作。

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

更新：问题已解决

您可以在下面的答案和评论中看到我使用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文档中 ：

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

好的，我感谢@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开发人员指南-表达式