模板中的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 。

我想知道是否有更通用的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）沖突