Question

我有一个问题是使用带有多重{{}}的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}}是{{rdv.age}}岁”。如果我在title属性中只放了一个{{expression}}，它就可以完美运行。

如何在此title属性中添加多个{{}}表达式？

更新：问题已解决

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

确定，我发现了一些感谢@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属性中的多个{{}}

3 个答案: