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

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:

我试图将工具提示初始化从jQuery移到自定义指令的链接函数中。HTML非常简单:

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

Current jQuery:

目前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

但是，我得到了以下错误:未捕获的TypeError: loginCount。工具提示不是函数

1 个解决方案

#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:

然后i html你可以添加如下:

<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.

还要记住，在使用角度之前要包含jquery。因为否则角度将加载和使用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

无论如何，我宁愿使用有棱角的工具提示，比如http://720kb.github。io/angular-tooltip或甚至更好的角http://angular-ui.github.io/bootstrap引导

#1