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>

检查谷歌浏览器上的按钮元素，我发现删除了一些事件监听器：

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

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

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

为什么？

我该怎么办？

Answer 1

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

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

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

//...

<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函数。我想这就是为什么它不能用你的方法工作的原因。您可能在元素真正呈现之前调用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

1 个答案: