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

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();
  });
}

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

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。

在任何情况下，我宁愿使用像 http://720kb.github.io/angular-tooltips 这样的 Angular 工具提示，或者甚至更好的 Angular 引导程序 http://angular-ui.github.io/bootstrap