Question

嘿，大家好想创建一个新的指令，当你有任何带有属性的标签时，bt-tooltip =“你的消息就在这里”，它应该为元素添加bootstrap工具提示。工具提示消息应该有!!!在消息的最后。

（例如，这是一个段落

应该显示一个工具提示，上面写着“这是一个工具提示!!!”

或

列表项应显示工具提示，并显示消息“Second tooltip !!!”）

我可以通过bootstrap轻松添加工具提示，但是想要像上面的描述那样添加工具提示。特别是你从属性输入的部分，如<p bt-tooltip=”This is a tooltip”>

现在我的角度代码看起来像这样

 app.directive("bttooltip", function() {
      return {
          template : "<p>Made by a directive!<p>"

     };
 });

我该怎么办？

Answer 1

使用Angular编写引导程序的方法更简单：UI Bootstrap，由Angular团队编写并允许使用bootstrap作为指令 - 不需要jQuery（除了Angular附带的最小版本）。一旦你设置了Angular UI库的脚本引用（确保使用＆＃34; tpls＆＃34;版本来获取所有样式化的模板）和对boostrap CSS的引用，你可以这样做：

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>

Here's a JSFiddle证明了上述情况。

<强>更新

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

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();
            });
        }
    }
}

Answer 2

您可以添加

element.append("<div ng-include='\"" + templateUrl + "\"'></div>");

检查此link

Angularjs：使用Bootstrap工具提示进行指令

2 个答案: