Ich habe eine Angular-Anwendung, die das automatische Bootstrapping mit dem Attribut ng-app verwendet. I, dann später, eine DOM-Teilstruktur in einem Bootstrap modalen Dialog aus einer HTML-Vorlage hinzufügen, etwa so:So aktivieren Sie den neuen Winkelregler nach dem Bootstrapping

<!DOCTYPE html> 
<html ng-app="Foo"> 
<head> 
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" /> 
</head> 

<body> 
    <a href="template.html" data-toggle="modal" data-target="#modal">Modal</a> 

    <div class="modal fade" id="modal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     </div> 
    </div> 
    </div> 

    <script src="lib/jquery/jquery.js"></script> 
    <script src="lib/bootstrap/js/bootstrap.js"></script> 
    <script src="lib/angular.js/angular.js"></script> 
</body> 
</html>

nun in der Vorlage, ich habe ein div mit einem ng-controller Attribute einen registrierten Controller, um es zu binden , wie folgt:

<div ng-controller="ViewModalController"> 
</div>

Der Controller wird regelmäßig in der Anwendung registriert.

Allerdings ist der Controller nach dem Laden des Modals nicht gebunden, da das ng-controller div beim Bootstrapping nicht verfügbar war.

Wie kann ich Angular es beim Laden abholen lassen?

Quelle

2016-07-23 Dominik George

Sind Sie diese Vorlage laden jQuery? –

Wahrscheinlich. Dies ist eine interne Magie in Bootstrap. –

Oh ja! Richtig. Siehe meine Antwort. –

Ja, Sie haben Recht. Das funktioniert nicht, weil es zum Zeitpunkt des Bootstrap nicht vorhanden war und Sie laden die neue Vorlage mit jQuery, für die Angular die Vorlage nicht kompiliert.

Um die Dinge arbeiten, sollten Sie die neu hinzugefügte HTML wie so (tun dies in einem der Steuerung und injizieren $compile) kompilieren:

$("#modal").on("shown.bs.modal", function() { 
    var $modal = angular.element(document.getElementById('modal')); 

    $compile($modal.contents())($scope); 
});

das Arbeitsbeispiel hier ansehen: https://plnkr.co/edit/zASHzGwOLxku12Ae5hnP?p=preview

Wichtig

Die Remote-Option, die Sie zum Laden der Vorlage verwenden, ist veraltet und wird in Bootstrap 4 entfernt. Besser nicht zu verwenden.

Außerdem hat Angulars UI-Team den nativen Angular-Code für die JavaScript-Funktionen von Bootstrap geschrieben, so dass Sie die jQuery- und die bootstrap.js-Datei nicht benötigen, wenn Sie Angular verwenden.

Kasse http://angular-ui.github.io/bootstrap/#/modal

Quelle

2016-07-23 16:00:37

Danke für Ihre ausführliche Antwort! Funktioniert wie ein Zauber, aber jetzt ging ich mit Angular-UI. –

So aktivieren Sie den neuen Winkelregler nach dem Bootstrapping

Antwort

Wichtig

Verwandte Themen