css - Angularjs:带有 Bootstrap 工具提示的指令

Question

嘿伙计们想创建一个新指令，当你有任何带有属性 bt-tooltip=”your message goes here” 的标签时，它应该向元素添加 Bootstrap 工具提示。工具提示消息应该有一个 !!!在消息的末尾。

(例如，这是一个段落

应该显示一个带有消息“This is a tooltip!!!”的工具提示

或

列表项应显示带有消息“第二个工具提示!!!”的工具提示

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

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

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

     };
 }); 

我该怎么办？

Answer 1

有一种更简单的方法可以在 Angular 中使用 Bootstrap :UI Bootstrap ，由 Angular 团队编写，允许使用 bootstrap 作为指令——不需要 jQuery(除了 Angular 附带的最小版本)。一旦你设置了对 Angular UI 库的脚本引用(确保使用“tpls”版本来获取所有样式模板)和对 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();
            });
        }
    }
}