Question

我尝试在tooltip内ng-repeat内加td，而<td>无法使用<td>。我知道它不清楚，但每次我想要将鼠标悬停在toolip的每个项目上时ng-if都有<table class="table table-bordered" > <thead><tr class="infoti" > <th>Id Dev</th> <th>Nom Dev </th> <th>Nom Ecu</th> <th>Etat</th> <th>Action</th> <tr> </thead> <tbody> <tr dir-paginate=" dev in devs | itemsPerPage:7 "> <td >{{dev.id}}</td> <td>{{dev.nomdev}}</td> <td >{{dev.ecu.nomEcu}}</td> <td ng-if="dev.validationdvd[0].etatvalid == 'Validé' "><a href="" data-toggle="tooltip" title="Some tooltip text!">Validé </a> </td> <td ng-if="dev.validationdvd[0].etatvalid != 'Validé' ">Non Validé</td> <td> <button class="btn btn-gray" ng-click="displaydata(dev.id)" data-toggle="modal" data-target="#myModal" >Validé</button> </td> </tr> </tbody> </table> <div class="tooltip top" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> {{dev.id}} </div> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> {{1}} {1}}了解更多细节。我的代码如下。我使用{{1}}因为结果为null。我不想显示空栏。

{{1}}

我初始化了这样的工具提示，它在ng-repeat之外工作，但它并不能解释我的描述

{{1}}

感谢任何指导!!

Answer 1

搜索后我找到了解决方案，首先你必须创建一个指令：

myApp.directive('tooltip', function () {
return {
    restrict:'A',
    link: function(scope, element, attrs)
    {
        $(element)
            .attr('title',scope.$eval(attrs.tooltip))
            .tooltip({placement: "right"});
    }
}
})

然后你指定要在工具提示中显示的内容我没有粘贴我的代码代码，因为这样更通用所以每个人都可以使用它，最后你在html中使用它

<li ng-repeat="item in items" >
        <a rel="tooltip" tooltip="item.whatever_you_want_to_display_inside_the_tool_tip">{{your Displayed item}}</a>

希望它可以帮到你

Ng-repeat内的工具提示

1 个答案: