问题描述
大家好要创建一个新指令,当您有任何带有属性bt-tooltip =您的消息到达此处"的标签时,应在该元素上添加引导工具提示.工具提示消息中应带有!!!在消息末尾.
Hey guys want to create a new directive that when you have any tag with attribute bt-tooltip="your message goes here" it should add bootstrap tooltip to the element. The tooltip message should have a !!! at the end of message.
(例如,这是一个段落
或
列表项应显示工具提示,并显示消息第二个工具提示!!")
List item should show a tooltip with message "Second tooltip!!!")
我可以通过引导程序轻松添加工具提示,但是想要像上面的描述一样添加.特别是您从属性中获取输入的部分,例如< p bt-tooltip =这是工具提示">
I can easily add tooltip via bootstrap but want to add it like description above.especialy the part that you get the input from attribute like this <p bt-tooltip="This is a tooltip">
现在我的角度代码如下所示
Right now my angular code looks like this
app.directive("bttooltip", function() {
return {
template : "<p>Made by a directive!<p>"
};
});
我该怎么办?
推荐答案
在Angular中使用引导程序的方法要简单得多: UI引导程序,由Angular团队编写,并允许使用引导程序作为指令-不需要jQuery(除了Angular附带的最低版本).一旦您设置了对Angular UI库的脚本引用(请确保使用"tpls"版本来获取所有样式模板)以及对boostrap CSS的引用,您可以执行以下操作:
There's a much easier way to use bootstrap stuff with Angular: UI Bootstrap, written by the Angular team and allows the use of bootstrap as directives - no jQuery (besides the minimal version included with Angular) required. Once you set a script reference to the Angular UI library (be sure to use the "tpls" version to get all the styled templates) and a reference to the boostrap CSS you can do this:
angular.module('app', ['ui.bootstrap'])
.controller('mainController', function(){
var _this = this;
_this.toolTip = 'Here is a sample tooltip';
})
<div ng-app="app" ng-controller="mainController as main" style="padding: 100px;">
<button uib-tooltip="{{main.toolTip}}!!!">
Button with a Tooltip
</button>
</div>
更新
如果您仍然想使用指令,请尝试将其更改为:
If you still want to use your directive, try changing it to this:
app.directive("btTooltip", function($timeout) {
return {
restrict: "A",
link: function(scope, element, attrs) {
$timeout(function() {
$(element).data("title", attrs.btTooltip + "!!!");
// set other options via data or use an options object
$(element).tooltip();
});
}
}
}
这篇关于Angularjs:带有Bootstrap工具提示的指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!