我有一个由 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 的众多内容之一?