UI路由器更改狀態而不更改url

有人知道如何在不更改url的情況下更改ui-router狀態？如下面的代碼所示;在某些情況下，用戶需要重定向到403或401狀態。我希望能夠做到這一點重定向，而無需更改網址。UI路由器更改狀態而不更改url

問候， klmdb

// make sure authGetCurrent has ran before routing starts 
$rootScope.$on("$locationChangeSuccess", function(event, next) { 

    event.preventDefault(); 

    AuthService.loadCurrentAuth().then(function(){ 

     $urlRouter.sync(); 
    }, function(){ 

     console.log("BIG ERROR!!!"); 
    }); 
}); 
// Configures $urlRouter's listener *after* your custom listener 
$urlRouter.listen(); 




$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) { 

    var requiredLogin  = (toState && toState.data ? toState.data.requiredLogin  : false), 
     requiredGroupRights = (toState && toState.data ? toState.data.requiredGroupRights : false);  // require the user to have at least one of these rights in the current group 

    if (requiredLogin && !AuthService.isLoggedIn()) { 

     event.preventDefault(); 
     $state.transitionTo('401'); 
     return; 
    } 
    if(requiredGroupRights){ 

     var i, 
      hasRight = false; 
     for(i=0;i<requiredGroupRights.length;i++){ 

      if(GroupService.checkGroupRights(toParams.groupId, requiredGroupRights[i])){ 
       hasRight = true; 
       break; 
      } 
     } 

     if(!hasRight){ 

      event.preventDefault(); 
      $state.transitionTo('403'); 
      return; 
     } 

    } 

});

來源

2014-12-04 klmdb

傳遞{ location: false }選項$ state.go

$state.go("home.foo", {}, { location: false });

看到它在行動：http://plnkr.co/edit/w2aolrt9wdW3EFcEB3Lw?p=preview

var app = angular.module('demonstrateissue', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise("/home"); 
    $stateProvider.state({ 
    name: 'home', 
    url: '/home', 
    controller: function() { }, 
    template: '<h1>Home</h1><div ui-view></div>'} 
); 
    $stateProvider.state({ 
    name: 'home.foo', 
    url: '/foo', 
    controller: function() { }, 
    template: '<h1>foo</h1>'} 
); 
}); 

// Adds state change hooks; logs to console. 
app.run(function($rootScope, $state, $location) { 
    $rootScope.$state = $state; 
    $rootScope.$location = $location; 

    // This function will go to home.foo state but not change url 
    $rootScope.gotofoo = function() { 
    $state.go("home.foo", {}, { location: false }); 
    }; 
});

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]*" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="0.2.13" src="https://rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script> 
    </head> 

    <body ng-app="demonstrateissue"> 

     <div ui-view>/div> 

     <div class="header"> 
     Current URL: <b>{{$location.url() }}</b> <br> 
     Current State: <b>{{$state.current.name }}</b> <br> 
     Current Params: <b>{{$state.params | json }}</b><br> 
     </div> 

     <!-- click this --> 
     <a href ng-click="gotofoo()">Go to foo dont change url</a> 
    </body> 
</html>

來源

2014-12-04 19:53:09

謝謝，這可以幫助我很多！ – klmdb 2014-12-08 11:34:33

這不適合我。 – 2016-08-26 13:43:09

如果你想不創建一個函數，可以傳遞一個對象到屬性「UI-SREF-選擇採用」像以下：

<a ui-sref="my-page" ui-sref-opts="{location:false}">My Page</a>

下面的行（存在於角-UI-router.js）示出了允許屬性：

var allowedOptions = ['location', 'inherit', 'reload', 'absolute'];

來源

2016-01-12 01:53:40

UI路由器更改狀態而不更改url

回答

相關問題