Angularjs:带有Bootstrap工具提示的指令 [英] Angularjs: Directive With Bootstrap Tooltip

问题描述

大家好要创建一个新指令，当您有任何带有属性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>

这是一个展示上述内容的JSFiddle .

更新

如果您仍然想使用指令，请尝试将其更改为:

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工具提示的指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！