AngularJS показать диалог от routeProvider

Question

Возможно ли [выполнить функцию], например. открыть диалоговое окно модального маршрута с помощью маршрутаProvider при запросе определенного маршрута?

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: Я хочу, чтобы отменить маршрут и вместо того, чтобы открыть диалоговое окно. Открытие диалогового окна - не единственная проблема. Отмена маршрута является основной проблемой.

Answer 1

Вы можете передать функцию зависимости в решимости, и он будет ждать, пока зависимость не будет решена, и когда ваш диалог заканчивается затем изменить маршрут и изменить историю, как вы хотите с помощью $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

Я думаю, вы должны поместить это в контроллер и перевернуть флаг модели, чтобы представление знало, что диалог должен быть показан. В угловом все управляется моделью.

Убедитесь, чтобы включить это в вашем модуле:

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

Добавить контроллер, который будет fireup вашего диалога.

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

Answer 3

Вы можете перенаправить маршрут на тот же частичный. Вы можете сделать это, наблюдая за изменением маршрута, используя следующий код. Вы также можете показать диалог здесь.

$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

Опираясь на Ответ Rishabh и использование местоположения sergey.skipReload от this Angular Issue, вы можете использовать следующее, чтобы создать диалог по изменению маршрута, отложить изменение url на неопределенный срок (фактически «отменить» изменение маршрута) и переписать строку URL обратно в '/'без дополнительной перезагрузки:

//Override normal $location with this version that allows location.skipReload().path(...) 
// Be aware that url bar can now get out of sync with what's 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: '/' 
     }); 

Это похоже на то, что оно утечки неразрешенных обещаний, и может быть более аккуратное решение, но это сработало для моих целей.