abriendo un modal en una ruta en AngularJS con angular-ui-bootstrap

Intento hacer lo que esencialmente se respondió aquí. No se puede abrir la window modal de bootstrap como ruta.

Sin embargo, mi solución simplemente no funcionará. Me sale un error

Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal

 My app has the ui.bootstrap module injected - here is my application config var app = angular.module('app', ['ui.router', 'ui.bootstrap','ui.bootstrap.tpls', 'app.filters', 'app.services', 'app.directives', 'app.controllers']) // Gets executed during the provider registrations and configuration phase. Only providers and constants can be // injected here. This is to prevent accidental instantiation of services before they have been fully configunetworking. .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router // ------------------------------------------------------------------------------------------------------------ $stateProvider .state('home', { url: '/', templateUrl: '/views/index', controller: 'HomeCtrl' }) .state('transactions', { url: '/transactions', templateUrl: '/views/transactions', controller: 'TransactionsCtrl' }) .state('login', { url: "/login", templateUrl: '/views/login', controller: 'LoginCtrl' }) .state('otherwise', { url: '*path', templateUrl: '/views/404', controller: 'Error404Ctrl' }); $locationProvider.html5Mode(true); }]) 

Reduje mi controller a lo siguiente:

 appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) { $modal.open({templateUrl:'modal.html'}); }]); 

En última instancia, lo que espero lograr es cuando el inicio de session no se requiere en realidad IR a la página de inicio de session, sino abrir un cuadro de dialog.

También intenté usar la function onEnter en el método de estado ui-router . No pude hacer que esto funcione tampoco.

¿Algunas ideas?

ACTUALIZAR

Ok, así resulta que tener ui-bootstrap.js Y ui-bootstrap-tpls rompe esto. Después de leer los documentos, pensé que necesitabas las templates para trabajar CON ui-bootstrap. aunque parece que todos los depunkers solo cargan en el file .tpls – una vez que eliminé el file ui-bootstrap mi modal funciona … ¿Estoy ciego? o ¿no dice realmente cuál necesita en los documentos de github? –

Ahora solo tengo que averiguar cómo evitar que mi url realmente vaya a / login, en lugar de simplemente mostrar el modal 🙂

actualización 2

Ok, entonces al llamar a $ state.go ('login') en un service lo hago por mí.

4 Solutions collect form web for “abriendo un modal en una ruta en AngularJS con angular-ui-bootstrap”

Hola, tuve dificultades para resolver el problema similar. Sin embargo, pude resolverlo. Esto es lo que probablemente necesitarías.

 app.config(function($stateProvider) { $stateProvider.state("managerState", { url: "/ManagerRecord", controller: "myController", templateUrl: 'index.html' }) .state("employeeState", { url: "empRecords", parent: "managerState", params: { empId: 0 }, onEnter: [ "$modal", function($modal) { $modal.open({ controller: "EmpDetailsController", controllerAs: "empDetails", templateUrl: 'empDetails.html', size: 'sm' }).result.finally(function() { $stateProvider.go('^'); }); } ] }); }); 

Haga clic aquí para plunker. Espero eso ayude.

Estoy trabajando en algo similar y esta es mi solución.

Código HTML

 <a ui-sref="home.modal({path: 'login'})" class="btn btn-default" ng-click="openModal()">Login</a> 

Configuración del estado

 $stateProvider // assuming we want to open the modal on home page .state('home', { url: '/', templateUrl: '/views/index', controller: 'HomeCtrl' }) // create a nested state .state('home.modal', { url: ':path/' }); 

Controlador casero

 //... other code $scope.openModal = function(){ $modal.open({ templateUrl: 'path/to/page.html', resolve: { newPath: function(){ return 'home' }, oldPath: function(){ return 'home.modal' } }, controller: 'ModalInstanceController' }); }; //... other code 

Finalmente, el controller de instancia modal. Este controller sincroniza los events modales (abrir / cerrar) con los cambios de ruta de URL.

 angular.module("app").controller('ModalInstanceController', function($scope, $modalInstance, $state, newPath, oldPath) { $modalInstance.opened.then(function(){ $state.go(newPath); }); $modalInstance.result.then(null,function(){ $state.go(oldPath); }); $scope.$on('$stateChangeSuccess', function () { if($state.current.name != newPath){ $modalInstance.dismiss('cancel') } }); }); 

Puede crear un estado con la misma templateUrl y controller que su página donde desea mostrar el modal, agregando el object params a él

 $stateProvider .state('root.start-page', { url: '/', templateUrl: 'App/src/pages/start-page/start-page.html', controller: 'StartPageCtrl' }) .state('root.login', { url: '/login', templateUrl: 'App/src/pages/start-page/start-page.html', controller: 'StartPageCtrl', params: { openLoginModal: true } }) 

Y en el controller de la página, use este parámetro para abrir el modal

 .controller("StartPageCtrl", function($scope, $stateParams) { if ($stateParams.openLoginModal) { $scope.openLoginModal(); } 

Encontré una pista útil para hacer que esto funcione. Probablemente hay advertencias, pero funciona para mí. Puede pasar un result todavía, pero no necesito uno.

Al usar finally lugar de la promise then promise resolvió esto para mí. También tuve que almacenar el estado anterior en rootScope, así que sabíamos a qué volver.

Guarde el estado anterior en $ rootScope

 $rootScope.previousState = 'home'; $rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams){ $rootScope.previousState = from.name; }) 

Estado usando onEnter

 $stateProvider.state('contact', { url: '/contact', onEnter: function ($state, $modal, $rootScope){ $modal.open({ templateUrl: 'views/contact.html', controller: 'ContactCtrl' }).result.finally(function(){ $state.go($rootScope.previousState); }) } }); 
  • ¿Cómo paso múltiples attributes en una directiva de atributo Angular.js?
  • ¿Cuál es el enfoque común para el almacenamiento en caching de datos en angular.js
  • Mostrar opciones HTML basadas en opciones seleccionadas por separado con Angular
  • IE11 lento / congelar con la representación ng-repeat de AngularJS
  • Referencia al valor de un object dentro de un marcado angular {{}} html
  • Filtro de palanca angular en ng-repeat
  • Angular js - route-ui agrega el parmetro por defecto
  • Angularjs $ http.post - envío de parameters como JSON a ASPX webmethod
  • Cómo get url de request en una request angularjs $ http
  • AngularJs con marco i
  • Firebase TIMESTAMP hasta la date y hora
  • Cómo agregar una fila dinámica a una tabla usando angularjs
  • ¿Cómo aislo solo un valor único en mi scope directivo?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.