Angular Modal: Vorlage von einem anderen HTML hinzufügen

Question

Ich habe eine modale Vorlage in einer anderen HTML-Datei, aber nachdem die Seite zum ersten Mal geladen wurde Modal-Fenster öffnet sich ohne Inhalt, zum zweiten Mal ist alles in Ordnung. Wie kann das behoben werden?

Hier ist der Plunker http://plnkr.co/edit/lw056nAaU7BfqIVZSddb?p=preview

//Open modal on main page with: 
<div ng-controller="ModalDemoCtrl"> 
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button> 
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button> 
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button> 
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button> 
<div ng-show="selected">Selection from a modal: {{ selected }}</div> 

Answer 1

Sie sollten Ihre Vorlage nicht mit <script type="text/ng-template" id="myModalContent.html"></script> umbrechen.

Ui-modal erwartet direktes HTML hier.

Wenn Sie ng-Vorlage verwenden müssen, sollten Sie die ng-Template Script-Tag in Ihrem index.html (oder anderswo, aber es sollte auf Ihrer Seite geladen werden) Einsatz mit template statt templateUrl diese und öffnen Sie Ihre modal übrigens:

var modalInstance = $uibModal.open({ 
     animation: $scope.animationsEnabled, 
     template: "<div ng-include src=\"'myModalContent.html'\"></div>", 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
     items: function() { 
      return $scope.items; 
     } 
     } 
}); 

Answer 2

Vielleicht können Sie $templateCache in diesem Fall verwenden Sie stattdessen die Vorlage aus einer anderen Datei zu laden. Ich weiß nicht, warum du dieses Problem hast, aber das hat das Problem für mich gelöst.

Vielleicht suchen Sie nicht so etwas, da dies die JS-Dateigröße erhöht und manchmal wird diese Vorlage nie verwendet.

angular.module('ui.bootstrap.demo').run(['$templateCache', function ($templateCache) { 

    $templateCache.put('myModalContent.html', 
     'Hello World' 
    ); 

}]); 

Was denken Sie?

EDIT: @Pierre Maoui Antwort scheint für mich basierend auf der Frage angemessener.