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

我正试图将工具提示初始化从jQuery移到自定义指令的link函数中。HTML相当简单：

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

当前jQuery：

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

我在自定义指令中尝试执行的操作：

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

但是，我得到了以下错误：
Uncaught TypeError: loginCount.tooltip is not a function

最佳答案

你的自定义指令应该是这样的

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

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

然后我html你可以添加如下：

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

还要记住在angular.js之前包含jquery，否则angular将加载并使用jqlite。
无论如何，我宁愿使用角度工具提示，比如http://720kb.github.io/angular-tooltips或者更好的角度http://angular-ui.github.io/bootstrap引导