javascript - 弹出窗口未显示在 Angular 模板中

Question

我正在使用带有 Angular 模板的 Bootstrap 弹出窗口。我使用 ng-include 指令包含 Angular 模板。该模板由一个弹出窗口组成。我试图通过 Angular Directive(指令)来显示该弹出窗口，但它没有显示。 Angular Directive(指令)

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

使用 ng-include 指令从另一个 html 页面包含以下 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对于该范围内的事物。

其次，如果您确实希望它正常工作，请确保正确加载 Bootstrap 脚本。然后尝试使用 ng-click 按钮监听 click 事件并触发弹出框。

这是实现您想要的代码。

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?

问候，