UI-router 更改状态而不更改 url-前端问题

UI-router change state without changing url(UI-router 更改状态而不更改 url)

本文介绍了UI-router 更改状态而不更改 url的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有人知道如何在不更改 url 的情况下更改 ui-router 状态吗?如下面的代码所示；在某些情况下，需要将用户重定向到 403 或 401 状态.我希望能够在不更改 url 的情况下执行此重定向.

Does anybody know how to change the ui-router state without changing the url? As the code below shows; in some cases the user needs to be redirected to 403 or 401 states. I would like to be able to do this redirect without changing the 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;
        }

    }

});

推荐答案

将 { location: false } 选项传递给 $state.go

Pass the { location: false } option to $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="angular.js@*" data-semver="1.2.25" src="aHR0cHM6Ly9jb2RlLmFuZ3VsYXJqcy5vcmcvMS4yLjI1L2FuZ3VsYXIuanM="></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="aHR0cHM6Ly9yYXdnaXQuY29tL2FuZ3VsYXItdWkvdWktcm91dGVyLzAuMi4xMy9yZWxlYXNlL2FuZ3VsYXItdWktcm91dGVyLmpz"></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>

这篇关于UI-router 更改状态而不更改 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！