88

AngularJsでルート変更イベントをキャンセルするにはどうすればよいですか?

私の現在のコードは

$rootScope.$on("$routeChangeStart", function (event, next, current) {

// do some validation checks
if(validation checks fails){

    console.log("validation failed");

    window.history.back(); // Cancel Route Change and stay on current page  

}
});

これにより、検証が失敗した場合でも、Angular は次のテンプレートと関連データを取得し、すぐに前のビュー/ルートに戻ります。検証が失敗した場合、Angular が次のテンプレートとデータを取得したくありません。理想的には、window.history.back() が存在しないようにする必要があります。event.preventDefault() も試しましたが、使用できませんでした。

4

9 に答える 9

4

これに出くわした人にとっては、古い質問です（少なくともangular 1.4では）、これを行うことができます：

 .run(function($rootScope, authenticationService) {
        $rootScope.$on('$routeChangeStart', function (event, next) {
            if (next.require == undefined) return

            var require = next.require
            var authorized = authenticationService.satisfy(require);

            if (!authorized) {
                $rootScope.error = "Not authorized!"
                event.preventDefault()
            }
        })
      })
于 2015-10-16T07:36:59.813 に答える
1

これは私のソリューションであり、私にとってはうまくいきますが、Webテクノロジーに慣れていないため、正しい方向に進んでいるかどうかはわかりません。

var app = angular.module("app", ['ngRoute', 'ngCookies']);
app.run(function($rootScope, $location, $cookieStore){
$rootScope.$on('$routeChangeStart', function(event, route){
    if (route.mustBeLoggedOn && angular.isUndefined($cookieStore.get("user"))) {
        // reload the login route
        jError(
             'You must be logged on to visit this page',
             {
               autoHide : true,
               TimeShown : 3000,
               HorizontalPosition : 'right',
               VerticalPosition : 'top',
               onCompleted : function(){ 
               window.location = '#/signIn';
                 window.setTimeout(function(){

                 }, 3000)
             }
        });
    }
  });
});

app.config(function($routeProvider){
$routeProvider
    .when("/signIn",{
        controller: "SignInController",
        templateUrl: "partials/signIn.html",
        mustBeLoggedOn: false
});
于 2014-11-15T23:20:49.020 に答える
0

共有するために、私の場合、$routeChangeStart でルート解決を遅らせたいと考えています。ルートの解決が開始される前にロードする必要がある SomethingService があります (はい、おしゃべりなアプリケーションです)。したがって、待機するという約束があります。ハックを見つけたのかもしれません...解決が拒否を返すと、ルートの解決がエラーになります。解決構成を壊したので、後で修正します。

    var rejectingResolve = {
        cancel: function ($q){
            // this will cancel $routeChangeStart
            return $q.reject();
        }
    }
    
    $rootScope.$on("$routeChangeStart", function(event, args, otherArgs) {
        var route = args.$$route,
            originalResolve = route.resolve;
    
        if ( ! SomethingService.isLoaded() ){

            SomethingService.load().then(function(){
                // fix previously destroyed route configuration
                route.resolve = originalResolve;
                
                $location.search("ts", new Date().getTime());
                // for redirections
                $location.replace();
            });

            // This doesn't work with $routeChangeStart: 
            // we need the following hack
            event.preventDefault();
            
            // This is an hack! 
            // We destroy route configuration, 
            // we fix it back when SomethingService.isLoaded
            route.resolve = rejectingResolve;
        } 
    });
于 2020-10-22T10:25:47.150 に答える