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