2

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

应用程序.js.coffee

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 的方法。它onload用于ng-include替换ng-view.

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

我想知道是否有更通用的 Angular 方法来执行此操作,特别是因为工具提示只是需要附加到最终 DOM 的众多内容之一?

4

1 回答 1

3

实际上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)

于 2013-10-31T18:13:24.940 回答