Question

我正在使用带角度模板的bootstrap popover。我使用ng-include指令包含角度模板。该模板由一个弹出窗口组成。我试图通过角度指令带来那个popover但它没有显示出来。角度指令

angular.module('app').directive('popover', function () {
    return {
        link: function (scope, element, attrs) {
            $("[data-toggle=popover]").popover();
        }
    };
});

以下html模板包含在另一个带有ng-include指令的html页面中。

<div>
    <span class="title">
        <button title="" data-original-title="" class="popper btn-link" popover data-toggle="popover">4 Peoples</button>

        <div class="popper-content hide">
            <p>
                <span> Alex</span>
                <a href="#" class="pull-right"></a>
            </p>
            <p>
                <span>Francis</span>
                <a href="#" class="pull-right"></a>
            </p>
            <p>
                <span>Mark</span>
                <a href="#" class="pull-right"></a>
            </p>
            <p>
                <span>Peter</span>
                <a href="#" class="pull-right"></a>
            </p>
        </div>
    </span>
</div>

但是，如果我点击该按钮，则不会显示弹出窗口。

Answer 1

首先，根据我自己的经验，我建议在该范围内使用angular-bootstrap。

其次，如果您确实希望它能够正常工作，请确保正确加载引导脚本。然后尝试通过按住按钮并单击该按钮来触发点击事件。

这是实现你想要的代码。

scope.popover = function() {
        $("[data-toggle=popover]").popover({
          html: true,
          content: $('.popper-content').html(),
          placement: attrs.popoverPlacement
        });
      };

这是html：

<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
        4 Peoples
</button>

以下是plunkr： https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview

有很多方法可以达到你想要的效果。顺便提一下，我建议你阅读： "Thinking in AngularJS" if I have a jQuery background?

此致

弹出窗口不显示角度模板

1 个答案: