tpls - modal bootstrap angularjs

Problema de la ventana modal(Proveedor desconocido: ModalInstanceProvider) (4)

Nuevo en AngularJS y parece que no puede descubrir qué significa este error. He encontrado algunos otros con el mismo error pero parece que sus problemas no se corresponden con los míos.

Proveedor desconocido: $ modalProvider <- $ error de modalidad con AngularJS (Parece que tengo la última versión de ui-bootstrap)

Y todos los demás parecen tener problemas de alcance con un modal, sin embargo, parece que no puedo obtener el modal para empezar, así que creo que no están relacionados. Por favor, dime si estoy equivocado y cómo ese es el caso:

Problema de alcance en AngularJS utilizando AngularUI Bootstrap Modal

Problemas de alcance con la interfaz de usuario angular

Tomé el script ui-bootstrap-tpls-0.6.0.min.js desde aquí: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files e incluso intenté agregar la ui-bootstrap-0.6.0.min.js también pensando que posiblemente sea necesario. Aunque si lo leo correctamente, parece que si escogiera la ui-bootstrap-0.6.0.min.js comandos ui-bootstrap-0.6.0.min.js también tendría que tomar todas las plantillas aquí https://github.com/angular-ui/bootstrap/tree/master/template Lo que parece ser el caso si uso solo ese script basado en los errores:

Error: Failed to load template: template/modal/window.html Error: Failed to load template: template/modal/backdrop.html

He creado un plunker con todo para simplificar la explicación de la estructura, etc. y pegar todo el código aquí.

http://plnkr.co/edit/yg3G8uKsaHNnfj4yNnJs?p=preview

El error (que puede ver al probar el código en plunker con la consola abierta) es el siguiente:

Error: Unknown provider: $modalInstanceProvider <- $modalInstance at Error (<anonymous>) at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:24 at Object.c [as get] (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310) at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:30:109 at c (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:310) at d (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:27:444) at Object.instantiate (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:29:80) at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:53:80 at http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:44:136 at m (http://run.plnkr.co/8OIh0YtLn1dg9OvR/angular.min.js:6:494)

Si alguien puede dar una idea de lo que puedo estar haciendo mal aquí. No parece ser un problema de alcance. ¿Más como un problema de configuración o posiblemente la forma en que estoy iniciando manualmente la aplicación?

Si proporciona el nombre del controlador al abrir y también en su plantilla, obtendrá el mismo error.
Retire el controlador ng de su plantilla

Feliz codificacion

He adaptado J. Bruni''s Plunker para trabajar con Bootstrap3. Lo puedes encontrar aquí:

http://plnkr.co/edit/sgT87KEubgcWkrEfhTRz?p=preview

Tenga en cuenta que a partir de la compatibilidad con ui-bootstrap 0.7.0 bootstrap3 será nativo y cualquier problema relacionado con los modales (y otras directivas, por ejemplo, la barra de progreso) debe solucionarse.

Parece que no está inyectando el servicio $modal como una dependencia.

¿Cómo "inyectar un servicio"?

Considere la function que está intentando usar el servicio ... debería declararlo así:

[''$modal'', function($modal) { // $modal has been injected here, you can use it }]

Editar:

Te he estudiado Plunk ahora ... está complicando las cosas simples y revela algunos errores de comprensión acerca de los conceptos de AngularJS (controlador, alcance, etc.)

Además, estaba usando 3 CSS de Bootstrap, que actualmente no es compatible con AngularJS Bootstrap. He cambiado el enlace de CSS a Bootstrap 2.

Vea cómo puede ser mucho más simple y efectivo: http://plnkr.co/edit/YFuAA5B65NZggd6fxjCh?p=preview

Recomiendo estudiar este documento cuidadosamente, de principio a fin: http://docs.angularjs.org/guide/concepts

Este video también es muy bueno, pero no proporciona una visión más profunda de los conceptos: http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx

Básicamente, el mensaje de error le decía que estaba intentando inyectar un servicio en algo (el "ModalController", en su caso), pero este servicio no se encontró.

"¿Cómo estaba tratando de inyectarme?" - Tu puedes preguntar. La respuesta es: cada parámetro que necesita en una función de Controlador es una "dependencia" a ser "inyectada" - y el servicio "inyector" de AngularJS realiza esta tarea. Así es como el parámetro "$ scope" recibe mágicamente un "alcance": es el inyector que trabaja detrás de escena.

En su ModalController, el inyector intentaba satisfacer las dependencias "$ modalInstance" y "items" (elimine el parámetro "$ modalInstance": el mensaje de error cambiará a "itemsProvider not found") ...

Si desea recibir dependencias como esta, a través del trabajo "mágico" del inyector, necesita crear / declarar servicios con estos nombres ... (o use correctamente el atributo "resolver" como estaba tratando de hacer) ... .

... pero esto no es necesario en este caso en absoluto. Solo desea acceder a "elementos" y devolver un elemento seleccionado. También intentabas cerrar / descartar el modal programáticamente.

Podría resolver dependencias a través del atributo "resolver", pero ¿por qué complicar tanto lo que se puede lograr con simplicidad? Simplemente use el atributo "alcance" en su lugar, y proporcione el alcance al modal: tendrá acceso a sus propiedades. El modal también agrega automáticamente las funciones "$ close" y "$ despide" al ámbito, para que pueda usarlas fácilmente.

¡Intentaba pasar atributos del ámbito principal al alcance modal inyectándolos como servicios en el controlador modal! :-) Estabas intentando inyectar la propia instancia modal en su controlador !!!

Por lo tanto, su problema principal está relacionado con el $injector (vale la pena estudiar de qué se trata esta inyección ), está bien explicado en el documento que he vinculado anteriormente.

"Inyectar un servicio" no es tan simple como "pasar una variable a una función". Casi llegaste al atributo de "resolución", pero como he dicho, realmente no es necesario para este caso simple.

He creado otro Plunker sin usar "scope", y manteniendo la "resolución" ... no es posible inyectar la "modalInstance" como lo hacemos con "items":

''$modalInstance'': function() { return modalInstance; }

... porque aún undefined está undefined en este momento ... podríamos solucionarlo simplemente llamando a $scope.$close en el ModalController (y no inyectando el modal) ...

... o, como lo hice, inyectándolo a través de una función ... muy loco, pero funciona:

http://plnkr.co/edit/9AhH6YFBUmhYoUDhvnhQ?p=preview

... Nunca lo haría así ... ¡es solo para propósitos de aprendizaje!

Por último, pero no menos importante: al agregar ng-controller en el archivo de plantilla, necesita el ModalController dos veces ... ya lo declaró en la configuración modal. Pero a través de la configuración modal, puede tener la inyección de dependencia a través del resolutor, mientras que a través de la plantilla no tiene la cosa de "resolución" aplicada.

Actualizar:

Como se señaló en los comentarios de Mahery, $modalInstance está disponible para inyección en el controlador mediante la implementación de AngularUI Bootstrap. Por lo tanto, no necesitamos ningún esfuerzo para "resolver" o hacer que esté disponible de alguna manera.

Aquí está el actualizado Plunker: http://plnkr.co/edit/BMfaFAWibHphDlZAkZex?p=preview

De hecho, el error estaba ocurriendo principalmente debido al atributo "ng-controller" en la plantilla. El controlador creado de esta manera no recibe el "Tratamiento AngularUI". Solo el controlador especificado en las opciones modales recibe el "tratamiento" donde se proporciona $modalInstance ...

Tengo el mismo error. Al eliminar ng-controller de la plantilla mientras proporciona su controlador a través de $ modal, puede solucionar este problema.

$modal.open({ templateUrl: ''MyView.html'', controller: ''MyViewController'' });