Question

我想为Bootstrap Popover功能创建一个指令。

控制器：

var app = angular.module('firstApp', ['ui.bootstrap']);

app.directive('popover', function() {
   return function(scope, elem) {
      console.log(elem)
      elem.popover({trigger: 'hover','placement': 'left'});
   }
})

HTML：

 <div class='content' ng-repeat ='item in items'>
     <button type="button" popover class="testBtn btn btn-default" data-container="body" data-toggle="popover" data-content="Vivamus sagittis." title='what?'>
        Popover on left
     </button>
 </div>

我在控制台中看不到日志，并且弹出窗口功能没有按预期工作。

Answer 1

您缺少定义指令的某些方面。尝试这样的方法来获得灵活 popover：

app.directive('popover', function () {
    return {
        restrict: 'A',
        template: '<span>{{label}}</span>',
        link: function (scope, el, attrs) {
            scope.label = attrs.popoverLabel;

            el.popover({
                trigger: 'click',
                html: true,
                content: attrs.popoverHtml,
                placement: attrs.popoverPlacement
            });
        }
    };
});

但是使用＆＃39; ui.bootstrap＆＃39;你应该已经拥有了这一切，而无需重新定义这个指令。

如果模块添加正确，您只需添加以下内容即可获得弹出窗口：

popover-placement="left" popover="On the Top!"

Answer 2

您没有在UI Bootstrap Popover的元素上设置正确的属性：

它应该看起来像这样：

<button type="button" class="testBtn btn btn-default" popover="Vivamus sagittis."
popover-trigger="click" popover-title='what?' popover-placement='left'>
   Popover on left
</button>

..并且您不需要像您所示那样定义自己的指令。

Demo

UI Bootstrap Docs

如果您正在寻找创建自己的指令（即不使用UI Bootstrap），则需要在代码中添加一些重要部分。我假设您实际上不希望这样做是基于您已将'ui.bootstrap'注入您的应用程序的事实，但无论如何，这里是{{3}展示它可能如何运作。

Popover不会从添加到视图的指令中出现

2 个答案: