angularjs - open - ui bootstrap tpls 2.5 0
$ uibModalInstance undefined(AngularJS UI.Bootstrap) (3)
Sospecho que la razón por la cual su código está fallando es porque está intentando inyectar la instancia modal en el controlador, cuya responsabilidad es crear el modal. No puede inyectarlo porque aún no existe. Intente usar controladores separados: uno para abrir el modal y otro para procesar los contenidos modales. Puede ver un ejemplo de esto en la parte de Javascript de nuestro ejemplo modal .
TBH, nunca he visto dependencias inyectadas de esa manera antes. ¿Hay algún problema que estés resolviendo al hacer eso? Cualquier razón por la que no solo estás usando:
angular.module(...).controller(''MyController'', [''dep1'', dep2'', ..., MyControllerFunction]);
function MyControllerFunction(dep1, dep2) {...}
¿Por qué no se puede inyectar $ uibModalInstance aquí?
http://plnkr.co/edit/mi9Ytv0HaqE47ENod4Gn?p=preview
baseController.$inject = [''$uibModal'', ''$uibModalInstance''];
function baseController($uibModal, $uibModalInstance) {
self.ok = function () {
$uibModalInstance.close(self.selected.item);
};
self.cancel = function () {
$uibModalInstance.dismiss(''cancel'');
};
Intento acceder a $ uibModalInstance y si intento inyectarlo, aparece un error de inyección.
Si no lo inyecto, entonces no está definido ...
Hubo algunas cosas mal con su ejemplo plunk:
El orden en que carga sus scripts es importante, tenía:
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.module.js"></script>
<script src="childController.js"></script>
<script src="baseController.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
Esto no funcionará, ya que app.module.js depende de angular-ui-bootstrap.js y childController.js depende de angular-animate.js y childController.js depende de baseController.js. Necesita cargar los scripts en el siguiente orden :
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app.module.js"></script>
<script src="baseController.js"></script>
<script src="childController.js"></script>
En childcontroller.js, tienes:
angular
.module(''app'', [''ngAnimate''])
Que recrea y sobrescribe la ''aplicación'' creada en la aplicación.module.js. Debería insertar el módulo ngAnimate en su app.module.js así:
angular
.module(''app'', [''ngAnimate'', ''ui.bootstrap'']);
No necesita una referencia a $ uibModalInstance en su controlador base, el:
var modalInstance = $uibModal.open({
animation: self.animationsEnabled,
templateUrl: ''help.html'',
controller: ''BaseController'',
size: size
});
le da acceso al modal que abrió a través de ''var modalInstance'' que tiene métodos close y dismiss.
MUCHAS de las grandes declaraciones aquí, pero ninguna de ellas resolvió el problema.
amg-argh consiguió mi plkr trabajando con la forma en que había configurado mi inyección
http://plnkr.co/edit/GXXmUosUEnEO3Tk0gUyp?p=preview
La magia más grande vino de esta edición aquí ...
var childController = function ($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close({ my: ''data'' });
}
$scope.cancel = function () {
$uibModalInstance.dismiss();
}
}
self.open = function (size) {
var modalInstance = $uibModal.open({
animation: self.animationsEnabled,
templateUrl: ''help.html'',
controller: childController,
size: size
});
};
+++++++++++++++++++++++++++++
También quiero señalar que esto DEBERÍA hacerse más tarde como un Servicio, tal como lo ha señalado icfantv . Pero necesito descubrir la sintaxis para regresar y consumir la promesa modal ...
¡¡Gracias a todos por su ayuda!!
¡Aclamaciones!