事件侦听器在 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 上的按钮元素，我发现一些事件侦听器已被删除：

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

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

如您所见，鼠标悬停和鼠标移出侦听器消失了。

为什么？

我能做什么？

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 项目中使用了它，它真的很有帮助。

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

Event listener disappears inside ng-repeat

javascript

jquery

html

angularjs

mouseover