Question

是否可以[执行功能]，例如当请求某条路线时，从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：我想取消路线，而是打开一个对话框。打开对话框不是唯一的问题。取消路线是主要问题。

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

基于Rishabh的回答，并使用来自this Angular Issue的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: '&nbsp;',
        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: '/'
      });

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

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

我认为你应该把它放在一个控制器中并翻转一个模型标志让视图知道应该显示对话框。在角度中，一切都是由模型驱动的。

确保在您的模块中包含此内容：

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

添加一个控制器，它将启动你的对话框。

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

AngularJS显示来自routeProvider的对话框

4 个答案: