如何在自定義指令中初始化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();
  });
}

但是，我收到以下錯誤： 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工具提示，或者甚至更好的角度角度http://angular-ui.github.io/bootstrap引導程序