模板中的AngularJS + Bootstrap工具提示

Question

I have a template created by Rails. Putting a Bootstrap tooltip in the application.html.erb works fine but putting one in the template partial loaded by AngularJS does not work.

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>

The above works on any page as you'd expect.

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

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

The above template is being loaded by the AngularJS "ng-view" directive in the application.html.erb file thus:

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

The appropriate AngularJS route is triggering the load here:

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

When displaying a page with both links, the application.html.erb supplied tooltip works but the one in show.html.erb does not.

Seems like a timing problem. The load and attachment of the first tooltip happens fine but before the AngularJS template or partial is loaded. Somehow I need to trigger the attachment of the tooltip templates and partials are loaded, right?

This blog post talks about a method to attach jQuery in partials that seems rather baroque. It uses onload in an ng-include to replace ng-view .

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

I wonder if there is a more general Angular way to do this especially since tooltip is only one of many things that will need to be attached to the final DOM?

Answer 1

Actually Angular-UI is the answer. Silly me, I was using the same markup as standard Bootstrap and the same script. All I did was include ui.boostrap from Angular-UI and change the markup to:

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

In your app.js or wherever you add module dependencies you need to put:

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

BTW you may need to back up to 0.5.0 of the ui-bootstrap since the 0.6.0 version conflicts with the latest AngularJS (1.2 rc3 at this writing)