angularjs - open - ng bootstrap

AngularJS Modal no aparece cuando templateUrl cambia

Question

Hasta ahora, lo que tengo es directamente del ejemplo de UI angular:

Controlador:

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

Y esta sección, que está justo en el .html de toda la página, esta modal está activada. 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>

Esto funciona bien. Pero estoy tratando de refactorizar algunas cosas y organizar mi código, por lo que me gustaría mover el html modal a su propio archivo. Cuando lo hago, y trato de usarlo cambiando la plantillaUrl a la ruta: /tmpl/myModalContent.html , no aparece. El fondo aún aparece e inspeccionando la página muestra que se cargó correctamente, pero simplemente no aparece.

He intentado cambiar el CSS por el modal de acuerdo con estas sugerencias sin ninguna diferencia.

Mi pregunta es, ¿por qué funciona bien si la etiqueta del script está en el html principal, pero no está en absoluto si está en su propio archivo?

Aquí hay un plnkr que muestra a qué me refiero. Si copia lo que está en template.html y lo coloca justo sobre el botón en el archivo index.html, funciona ...

Answer 1

Elimine la declaración de plantilla para template.html y simplemente coloque el HTML sin procesar de la siguiente manera:

<!--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-->

Tu plnkr funcionó bien con un segundo clic en el botón. Mostraría el modal como se esperaba. La razón por la que apareció con un segundo clic es porque Angular cargaría la plantilla ''sin compilar'' la primera vez, luego compiló la plantilla en HTML sin formato, que está listo para los clics posteriores.

EDITAR: Además, cuando coloca el código de la plantilla en index.html, Angular compila la plantilla durante su paso inicial a través del DOM; es por eso que el modal parecía funcionar.

Answer 2

Bueno, claramente soy un tonto. Todo lo que tenía que hacer era incluir mi nuevo archivo en la vista principal.

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

Luego, llamarlo desde el controlador fue fácil, todo lo que necesitaba era la id (modalContent.html) como templateUrl.

Solo sigue nadando, y eventualmente llegarás allí :)