ng-repeat funktioniert nicht im Bootstrap-Popover

Question

Ich habe ein einfaches Bootstrap-Popover, das geöffnet wird, wenn ich auf eine Schaltfläche klicke. Ich möchte eine Liste von Namen im Popover-Body mit einer Art Schleife anzeigen. Ich habe die Liste der Namen in meinem angularjs Controller. Ich verwende ng-repeat im Popover, um die Liste zu erstellen. ng-repeat funktioniert gut, wenn ich es außerhalb des Popover verwende, aber es scheint nicht korrekt im Popover-Body zu funktionieren.

Es scheint sich so zu verhalten, als ob ich eine 2-Level-Nested-ng-Wiederholung in meinem Code habe, obwohl ich nirgends eine verschachtelte ng-Wiederholung habe! Außerdem scheint das Popover nicht vom richtigen Ort zu "springen" (es sollte aus der Taste herausspringen). Mache ich etwas falsch? Danke im Voraus! Hier ist die fiddle

Hier ist mein Code für das zeigt die 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

Ich habe noch, um herauszufinden, warum dies geschieht, so dass hat mich fasziniert, aber wenn Sie inline die Popup-Vorlage und entfernen Sie es aus dem DOM es funktioniert.

$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'); 

und dann diesen Code entfernen 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 --> 

Ich werde versuchen, um ein wenig mehr zu graben, um herauszufinden, warum, aber ich frage mich, ob Inhalte einstellen: auf etwas haben Sie explizit kompiliert das ist eigentlich im DOM repliziert die Dinge in irgendeiner Weise.

BEARBEITEN Nach etwas graben scheint es, dass die "Anzeige: keine" Probleme mit dem Aufruf von jquery .html verursachen kann, was die Kompilierung von $ durcheinander bringen könnte. Noch nicht ganz überzeugt, aber kann dich zu etwas führen.