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?
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)