AngularJS shows dialogue from routeProvider

Question

Is it possible to [execute a function], for example. open a modal dialog box from routeProvider when asking for a specific route?

myApp.config(function($routeProvider) { $routeProvider .when('/home', { controller: 'HomeCtrl', templateUrl: 'Home/HomeView.html' } ).when('/profile/:userId/changepwd', function(){ $dialog.messageBox(title, msg, btns) .open() .then(function(result){ alert('dialog closed with result: ' + result); }); } ).otherwise({ redirectTo: '/home' }); }); 

PS: I want to cancel the route and open a dialog box instead. Opening a dialog box is not the only problem. Canceling a route is a major issue.

Answer 1

You can pass your function as a dependency in resolution, and it will wait until the dependency is resolved, and when your dialog box ends, change the route and change the history as you want using $ location

 var app = angular.module('myApp', []) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/view1', { template: '&nbsp', controller: //empty function, resolve: { data1 : function($dialog, $location) { var promise = $dialog.messageBox(title, msg, btns) .open() .then(function(result){ alert('dialog closed with result: ' + result); //Use [$location][1] to change the browser history }); return promise; } } }); }]); 

Answer 2

Based on Rishab’s answer and using the sergey location.skipReload from this Angular Issue , you can use the following to create a dialog on the -change route, defer url change indefinitely (actually “undo” the route change) and rewrite the URL string back to “/” without causing a reboot:

 //Override normal $location with this version that allows location.skipReload().path(...) // Be aware that url bar can now get out of sync with what being displayed, so take care when using skipReload to avoid this. // From https://github.com/angular/angular.js/issues/1699#issuecomment-22511464 app.factory('location', [ '$location', '$route', '$rootScope', function ($location, $route, $rootScope) { $location.skipReload = function () { var lastRoute = $route.current; var un = $rootScope.$on('$locationChangeSuccess', function () { $route.current = lastRoute; un(); }); return $location; }; return $location; } ]); app .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/home', { controller: 'HomeCtrl', templateUrl: 'Home/HomeView.html' }) .when('/profile/:userId/changepwd', { template: ' ', controller: '', resolve: { data1: function($dialog, location, $q){ $dialog.messageBox(title, msg, btns) .open() .then(function(result){ //fires on modal close: rewrite url bar back to '/home' location.skipReload().path('/home'); //Could also rewrite browser history here using location? }); return $q.defer().promise; //Never resolves, so template '&nbsp' and empty controller never actually get used. } } }) .otherwise({ redirectTo: '/' }); 

It looks like it runs without promises permission, and there may be a tidier solution, but it worked for my purposes.

Answer 3

You can redirect the route to the same partial one. You can do this by observing a route change using the following code. Here you can also open a dialog.

 $rootScope.$on( '$routeChangeStart', function(event, next, current) { if ( next.templateUrl == "xyz.html" ) { //other validation logic, if it fails redirect user to the same page $location.path( "/home" ); } }); 

Answer 4

I think you should put this in the controller and flip the model flag so that the view knows that the dialog should be shown. In angular, everything is model driven.

Be sure to include it in your module:

 angular.module('youmodulename', ['ui.bootstrap']); 

Add a controller that launches your dialog box.

 function DialogCtrl ($scope, $location, $dialog) { $scope.openMsgBox = function () { var btns = [{result:'cancel', label: 'Cancel'}, {result:'ok', label: 'OK', cssClass: 'btn-primary'}]; $dialog.messageBox('title', 'msg', btns) .open() .then(function(result){ alert('dialog closed with result: ' + result); }); }(); }