如何在自定义指令中初始化Bootstrap工具提示

Question

I'm trying to move my tooltip initialization out of jQuery and into the link function of a custom directive. The HTML is fairly simple:

<p data-toggle='tooltip' data-placement='bottom' title='Players live: {{players.loggedIn}}' id='login-count'>

Current jQuery:

$(document).ready(function() {
  $('#login-count').tooltip();
});

What I'm attempting to do in my custom directive:

function link(scope, element) {
  var loginCount = angular.element(element[0].querySelector('#login-count'));
  angular.element(document).ready(function() {
    loginCount.tooltip();
  });
}

However, I'm getting the following error: Uncaught TypeError: loginCount.tooltip is not a function

Answer 1

your custom directive should be like this

angular.module('yourAppName') .directive('mytooltip', function() {
'use strict';

return {
    restrict: 'A',
    link: function(scope, el) {
        $(el).tooltip();
    }
};
});

and then i html you can add it like:

<p data-toggle='tooltip' data-placement='bottom' 
title='Players live: {{players.loggedIn}}' id='login-count' mytooltip>

also keep in mind to include jquery before angular.js because otherwise Angular will load and use jqlite.

In any case I would rather go with Angular tooltips like http://720kb.github.io/angular-tooltips or even better bootstrap for angular http://angular-ui.github.io/bootstrap