ng-repeat在bootstrap popover中无法正常工作

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

它似乎表现得好像我的代码中有2级嵌套的ng-repeat，尽管我没有在任何地方嵌套ng-repeat！此外，弹出窗口似乎不会从正确的位置“弹出”（它应该从按钮弹出）。难道我做错了什么？提前致谢！这里是fiddle

这里是我的显示酥料饼代码：

$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(); 
       }); 
      }); 
     };

来源

2016-05-13 Abhijeet Limaye

我还没有搞清楚为什么发生这种情况，让有我好奇，但如果您将内嵌的弹出模板从其工作的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。仍然不完全相信，但可能会引导你一些东西。

来源

2016-05-13 00:47:04 sourdoughdetzel

谢谢@sourdoughdetzel的答案。如果我在$ compile（...）中将模板写成字符串，ng-repeat肯定会起作用。但是，这不是你刚才提到的最好的方式。我希望有人能向我们解释为什么会发生这种情况。 –

有人可能会认为将html字符串存储在控制器中比将其隐藏在DOM中更好。 – sourdoughdetzel

ng-repeat在bootstrap popover中无法正常工作

回答

相关问题