事件监听器在 ng-repeat 中消失

Question

我的 HTML 表单有很多我使用 ng-repeat 创建的问题。 我想为一些问题创建一个弹出窗口。 当我将触发弹出的按钮放在 ng-repeat 之外时，它可以工作。在 ng-repeat 里面没有。

这有效（ng-repeat 之前的按钮）：

    <div class="row">
        <div class="col-md-12">                         
            <button title="" data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Popover on hover" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-wide">
                                    hover
            </button>
        <div ng-repeat="q in config.questionnaire.questions">

制作这个：

这不起作用（ng-repeat 后的按钮）：

    <div class="row">
        <div class="col-md-12">                         
            <div ng-repeat="q in config.questionnaire.questions">
                <button title="" data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Popover on hover" data-content="And here's some amazing content. It's very engaging. Right?" class="btn btn-primary btn-wide">
                                    hover
                </button>

查看google chrome上的button元素，发现部分事件监听器被移除了：

这些是 ng-repeat 之前按钮的事件监听器：

这些是 ng-repeat 之后按钮的事件监听器：

如您所见，mouseover 和 mouse out 监听器消失了。

为什么？

我能做什么？

Answer 1

如果您在 Angular 项目中使用 Bootstrap，请考虑使用 Angular UI 库。

https://angular-ui.github.io/bootstrap/#/popover

它提供了许多指令，可以更轻松地将 Bootstrap 与 Angular 连接起来。我用ng-repeat 测试了uib-popover 指令，它以这种方式正常工作。代码很简单：

//...

<div ng-repeat="t in main.testArray">
    <button uib-popover="My popover content" popover-title="Popover title" popover-trigger="mouseenter">{{t.text}}</button>
</div>

//...

我会尝试进一步调查您的问题，但该库似乎是一个简单的解决方法。

---

编辑

我想我也设法在不使用外部库的情况下找到了解决方案。我所做的是创建一个在指定元素上初始化 Boostrap 弹出框的指令。这样可以确保在渲染元素时会触发 popover 函数。我想这就是它不适用于您的方法的原因。您可能在元素真正呈现之前调用了popover 函数，因为ng-repeat 会延迟执行此操作。

这里是代码：

angular.module('moduleName')
    .directive('bootstrapPopover', function() {
        return {
             restrict: 'A',
             link: function (scope, element, attrs) { 
                  element.popover();
             }
        };
    });

然后在元素上使用指令：

<div ng-repeat="t in main.test">
    <button data-toggle="popover" data-placement="top" data-trigger="hover" data-title="Test" data-content="Test" 
            class="btn btn-primary btn-wide" bootstrap-popover>hover {{t.text}</button>
</div>

但是，我仍然建议尝试使用 Angular UI。我在上一个 Angular 项目中使用过它，它真的很有帮助。