AngularJS UI路由器 - 在不重新加载状态的情况下更改URL

Question

目前我们的项目使用默认$routeProvider,我正在使用这个"hack",url无需重新加载页面即可进行更改:

services.service('$locationEx', ['$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;
}]);

并在 controller

$locationEx.skipReload().path("/category/" + $scope.model.id).replace();

我想到的替换routeProvider用ui-router筑巢路线,但无法找到这ui-router.

是否有可能 - 做同样的事情angular-ui-router？

我为什么需要这个？让我用一个例子说明:
用于创建新类是路线/category/new 后clicking在SAVE我秀success-alert,我想改变路线/category/new,以/caterogy/23(23 -是存储在数据库新项目的ID)

Answer 1

只需使用 $state.transitionTo 而不是 $state.go .内部 $state.go 调用 $state.transitionTo 但自动设置选项 { location: true, inherit: true, relative: $state.$current, notify: true } .你可以打电话 $state.transitionTo 和设置 notify: false .例如:

$state.go('.detail', {id: newId}) 

可以替换为

$state.transitionTo('.detail', {id: newId}, {
    location: true,
    inherit: true,
    relative: $state.$current,
    notify: false
})

编辑:正如fracz所建议的那样,它可以简单地说:

$state.go('.detail', {id: newId}, {notify: false}) 

Answer 2

好的,已经解决了 :) Angular UI路由器有这个新方法,$ urlRouterProvider.deferIntercept() https://github.com/angular-ui/ui-router/issues/64

基本上归结为:

angular.module('myApp', [ui.router])
  .config(['$urlRouterProvider', function ($urlRouterProvider) {
    $urlRouterProvider.deferIntercept();
  }])
  // then define the interception
  .run(['$rootScope', '$urlRouter', '$location', '$state', function ($rootScope, $urlRouter, $location, $state) {
    $rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) {
      // Prevent $urlRouter's default handler from firing
      e.preventDefault();

      /** 
       * provide conditions on when to 
       * sync change in $location.path() with state reload.
       * I use $location and $state as examples, but
       * You can do any logic
       * before syncing OR stop syncing all together.
       */

      if ($state.current.name !== 'main.exampleState' || newUrl === 'http://some.url' || oldUrl !=='https://another.url') {
        // your stuff
        $urlRouter.sync();
      } else {
        // don't sync
      }
    });
    // Configures $urlRouter's listener *after* your custom listener
    $urlRouter.listen();
  }]);

我认为这种方法目前只包含在角度ui路由器的主版本中,带有可选参数的那个(也很好,顺便说一句).它需要从源代码克隆和构建

grunt build

文档也可以从源代码访问

grunt ngdocs

(它们内置在/ site目录中)// README.MD中的更多信息

似乎还有另一种方法,通过动态参数(我没有使用过).nateabele的许多功劳.

作为旁注,这里是Angular UI Router的$ stateProvider 中的可选参数,我将其与上述结合使用:

angular.module('myApp').config(['$stateProvider', function ($stateProvider) {    

  $stateProvider
    .state('main.doorsList', {
      url: 'doors',
      controller: DoorsListCtrl,
      resolve: DoorsListCtrl.resolve,
      templateUrl: '/modules/doors/doors-list.html'
    })
    .state('main.doorsSingle', {
      url: 'doors/:doorsSingle/:doorsDetail',
      params: {
        // as of today, it was unclear how to define a required parameter (more below)
        doorsSingle: {value: null},
        doorsDetail: {value: null}
      },
      controller: DoorsSingleCtrl,
      resolve: DoorsSingleCtrl.resolve,
      templateUrl: '/modules/doors/doors-single.html'
    });

}]);

它的作用是它允许解决一个状态,即使其中一个参数缺失.SEO是一个目的,可读性另一个.

在上面的例子中,我希望doorsSingle成为必需参数.目前尚不清楚如何定义这些.它可以使用多个可选参数,但不是真正的问题.讨论在这里https://github.com/angular-ui/ui-router/pull/1032#issuecomment-49196090

Answer 3

花了很多时间在这个问题上,这就是我的工作

$state.go('stateName',params,{
    // prevent the events onStart and onSuccess from firing
    notify:false,
    // prevent reload of the current state
    reload:false, 
    // replace the last record when changing the params so you don't hit the back button and get old params
    location:'replace', 
    // inherit the current params on the url
    inherit:true
});

Answer 4

Calling

$state.go($state.current, {myParam: newValue}, {notify: false});

will still reload the controller, meaning you will lose state data.

To avoid it, simply declare the parameter as dynamic:

$stateProvider.state({
    name: 'myState',
    url: '/my_state?myParam',
    params: {
        myParam: {
          dynamic: true,    // <----------
        }
    },
    ...
});

Then you don't even need the notify, just calling

$state.go($state.current, {myParam: newValue})

suffices. Neato!

From the documentation:

When dynamic is true, changes to the parameter value will not cause the state to be entered/exited. The resolves will not be re-fetched, nor will views be reloaded.

This can be useful to build UI where the component updates itself when the param values change.

Answer 5

此设置为我解决了以下问题:

• 从更新的URL时,训练控制器不叫两声.../,以.../123
• 导航到另一个状态时,不会再次调用训练控制器

状态配置

state('training', {
    abstract: true,
    url: '/training',
    templateUrl: 'partials/training.html',
    controller: 'TrainingController'
}).
state('training.edit', {
    url: '/:trainingId'
}).
state('training.new', {
    url: '/{trainingId}',
    // Optional Parameter
    params: {
        trainingId: null
    }
})

调用状态(来自任何其他控制器)

$scope.editTraining = function (training) {
    $state.go('training.edit', { trainingId: training.id });
};

$scope.newTraining = function () {
    $state.go('training.new', { });
};

培训控制员

var newTraining;

if (!!!$state.params.trainingId) {

    // new      

    newTraining = // create new training ...

    // Update the URL without reloading the controller
    $state.go('training.edit',
        {
            trainingId : newTraining.id
        },
        {
            location: 'replace', //  update url and replace
            inherit: false,
            notify: false
        });     

} else {

    // edit

    // load existing training ...
}