javascript - 模板中的 AngularJS + Bootstrap 工具提示

Question

我有一个由 Rails 创建的模板。将 Bootstrap 工具提示放入 application.html.erb 中效果很好，但将其放入 AngularJS 加载的模板部分中则不起作用。

application.js.coffee

jQuery ->
    $("a[rel~=popover], .has-popover").popover()
    $("a[rel~=tooltip], .has-tooltip").tooltip()

application.html.erb

<a href="#" class="has-tooltip" title="tooltip">hover over me for a tooltip</a>

以上内容适用于您期望的任何页面。

/app/assets/templates/guides/show.html.erb

<a href="#" class="has-tooltip" title="tooltip">hover over me for tooltip </a>

上述模板由 application.html.erb 文件中的 AngularJS“ng-view”指令加载，因此:

<div id="ng-app" ng-app="Guide" ng-view >
    <!-- angular templates load here -->
</div>

适当的 AngularJS 路由正在此处触发加载:

when('/guides/:id', {
    templateUrl:'<%= asset_path("guides/show.html") %>',
    controller: 'VideoDetailCtrl'
});

当显示具有两个链接的页面时，application.html.erb 提供的工具提示有效，但 show.html.erb 中的工具提示无效。

似乎是一个时间问题。第一个工具提示的加载和附件发生得很好，但在加载 AngularJS 模板或部分模板之前。我需要以某种方式触发工具提示模板的附件并加载部分内容，对吧？

这篇博文讨论了一种在部分中附加 jQuery 的方法，这看起来相当巴洛克。它在 ng-include 中使用 onload 来替换 ng-view。

http://blog.ruedaminute.com/2012/02/angular-js-applying-jquery-to-a-loaded-partial/

我想知道是否有一种更通用的 Angular 方法可以做到这一点，特别是因为工具提示只是需要附加到最终 DOM 的众多内容之一？

Answer 1

实际上Angular-UI就是答案。愚蠢的我，我使用了与标准 Bootstrap 相同的标记和相同的脚本。我所做的只是包含 Angular-UI 中的 ui.boostrap 并将标记更改为:

<a href="" tooltip-placement="right" tooltip="On the Right!">angular-ui tooltip</a>

在您的 app.js 中或您需要添加模块依赖项的任何位置:

angular.module('myModule', ['ui.bootstrap']); 

顺便说一句，您可能需要备份 ui-bootstrap 到 0.5.0，因为 0.6.0 版本与最新的 AngularJS(撰写本文时为 1.2 rc3)冲突