AngularJS Modal ne se présente pas quand templateURL change

Question

Jusqu'à présent, ce que j'ai est d'emblée l'exemple de l'interface utilisateur angulaire:

Controller:

var ModalDemoCtrl = function ($scope, $modal) { 

    $scope.open = function() { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl 
    }); 
    }; 
}; 


var ModalInstanceCtrl = function ($scope, $modalInstance) { 

    $scope.close = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}; 

Et cette section, qui est juste assis dans le. html pour toute la page, cette modalité est activée. Html:

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
    <h3 class="modal-title">I'm a modal!</h3> 
    <button class="btn btn-warning" ng-click="close()">X</button> 
    </div> 
    <div class="modal-body"> 
    Stuff 
    </div> 
</script> 

Cela fonctionne très bien. Mais j'essaie de refactoriser certaines choses et d'organiser mon code, donc je voudrais déplacer le html modal dans son propre fichier. Lorsque je le fais, et essayez de l'utiliser comme en changeant le templateUrl au chemin: \tmpl\myModalContent.html, il n'apparaît pas. La toile de fond apparaît toujours et l'inspection de la page montre qu'elle a été correctement chargée, mais ne s'affichera pas.

J'ai essayé de changer le CSS pour le modal par ces suggestions sans différence. Ma question est, pourquoi cela fonctionne-t-il bien si le tag de script est dans le HTML principal, mais pas du tout s'il est dans son propre fichier? Il s'agit d'un plnkr qui montre ce que je veux dire. Si vous copiez ce qui est dans le fichier template.html et que vous le placez juste au-dessus du bouton dans le fichier index.html, cela fonctionne ...

Answer 1

Eh bien, je suis clairement un mannequin. Tout ce que j'avais à faire était d'inclure mon nouveau fichier dans la vue principale.

<div ng-include="'path-to-file.html'"></div> 

ensuite appeler à partir du contrôleur était facile, tout ce que je avais besoin était l'id (modalContent.html) comme templateURL.

Il suffit de garder la natation, et vous finirez par obtenir là :)

Answer 2

Supprimez la déclaration de modèle pour template.html et ajoutez simplement du HTML brut comme ceci:

<!--script type="text/ng-template" id="template.html"--> 
      <div class="modal-body"> 
       Hello 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-primary" ng-click="cancel()">OK</button> 
      </div> 
<!--/script--> 

Votre plnkr a bien fonctionné avec un second clic sur le bouton. Il montrerait le modal comme prévu. La raison pour laquelle il est apparu avec le second clic est qu'Angular chargerait le modèle 'non compilé' la première fois, puis il compilerait le modèle en HTML brut qui est prêt pour vos clics ultérieurs.

EDIT: De même, lorsque vous placez le code du modèle directement dans index.html, Angular compile le modèle lors de son passage initial dans le DOM; C'est pourquoi le modal semblait fonctionner.