6

是否可以[执行功能] 例如，当请求某个路线时，从 routeProvider 打开一个模式对话框窗口？

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：我想取消一条路线，而是打开一个对话框。打开对话框并不是唯一的问题。取消路线是主要问题。

4

3 回答 3

4

您可以将您的函数作为依赖项传递给 resolve ，它会等到依赖项被解决，当您的对话结束时，然后使用$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;
                }
       }
   });
}]);
于 2013-07-23T23:26:30.127 回答
2

基于 Rishabh 的回答，并使用来自这个 Angular 问题的 sergey 的 location.skipReload，您可以使用以下内容创建关于路由更改的对话框，无限期推迟 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: '/'
      });

这感觉就像它泄露了未解决的承诺，并且可能有一个更简洁的解决方案，但这符合我的目的。

于 2013-09-12T14:32:14.143 回答
0

您可以将路线重定向到相同的部分。您可以通过使用以下代码观察路线的变化来做到这一点。您还可以从此处显示对话框。

$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" );
    }          
});
于 2013-07-23T06:57:04.063 回答