如何在自定义指令

时间:2015-06-30 17:32:59

标签: javascript html angularjs twitter-bootstrap

我试图将我的工具提示初始化从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

1 个答案:

答案 0 :(得分:3)

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

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

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

然后我可以将它添加为:

<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