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

Question

我正在尝试将工具提示初始化从 jQuery 移出并移至自定义指令的链接函数中。 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();
  });
}

但是，我收到以下错误: 未捕获的类型错误:loginCount.tooltip不是函数

Answer 1

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

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。

无论如何，我宁愿使用 Angular 工具提示，例如 http://720kb.github.io/angular-tooltips甚至更好的 Angular Bootstrap http://angular-ui.github.io/bootstrap