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

Question

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

应用程序.js.咖啡

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

应用程序.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']); 

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