Question

我有一个简单的bootstrap popover，当我点击一个按钮时会打开它。我想使用某种循环显示弹出框体中的名称列表。我在angularjs控制器中有名字列表。我在popover中使用ng-repeat来构建列表。如果我在弹出窗口外使用它，ng-repeat运行良好，但它似乎在弹出框体中无法正常工作。

虽然我的代码中没有嵌套的ng-repeat，但它似乎表现得好像我的代码中有一个2级嵌套的ng-repeat！此外，弹出窗口似乎没有从正确的位置“弹出”（它应该从按钮弹出）。难道我做错了什么？提前致谢！这是fiddle

这是我显示popover的代码：

$scope.showPopover = function() {
      jQuery(function($) {
                $('#pop').popover({
                    html: true,
                    container: 'body',
                    title: '<b style="margin-top:5px">Some Title</b>&nbsp;&nbsp;&nbsp;'+
                            '<button type="button" id="popoverCloseButton" class="close">&times;</button>',
                    content: function() {
                        return $compile($('#popover_content').html())($scope);
                    },
                    placement: 'auto right'
                }).popover('show');

                document.getElementById("popoverCloseButton").addEventListener("click", function(){
                    $scope.destroyPopover();
                });
            });
      };

Answer 1

我还没弄清楚为什么会发生这种情况，所以这让我很感兴趣，但是如果你内联弹出模板并将其从DOM中移除它就可以了。

 $scope.showPopover = function() {
      jQuery(function($) {
                $('#pop').popover({
                    html: true,
                    container: 'body',
                    title: '<b style="margin-top:5px">Some Title</b>&nbsp;&nbsp;&nbsp;'+
                            '<button type="button" id="popoverCloseButton" class="close">&times;</button>',
                    content: function() {
                        return $compile(`<div ng-repeat="x in students">
      <input type="checkbox"/>&nbsp;&nbsp;{{x.firstName}} {{x.lastName}}
        </div>`)($scope);
                    },
                    placement: 'auto right'
                }).popover('show');

然后从html中删除此代码

<!-- Popover -->
    <!--<div id="popover_content" style="display:none">

        <div ng-repeat="x in students">
      <input type="checkbox"/>&nbsp;&nbsp;{{x.firstName}} {{x.lastName}}
        </div>
    </div>-->
    <!-- End Popover -->

我会尝试更多地了解一下为什么但是我想知道是否设置内容：你已经明确编译的东西，实际上在DOM中以某种方式复制事物。

编辑经过一番挖掘，似乎“display：none”可能导致jquery .html调用问题，这可能会搞乱$ compile。仍然没有完全相信，但可能会引导你做点什么。

ng-repeat在引导程序弹出窗口中无法正常工作

1 个答案: