更改网址而无需重新加载状态
目前我们的项目使用默认的$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();
我正在考虑用ui-router替换routeProvider来嵌套路由，但是无法在ui-router找到它。
是否有可能 - 对angular-ui-router做同样的事情？
为什么我需要这个？ 让我用一个例子来解释一下：
clicking SAVE后，创建新类别的路线是/category/new我显示success-alert并且我想要更改路线/category/new到/caterogy/23 （23 - 是存储在db中的新项目的ID）
只要你可以使用$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})
好的，解决 :) 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路由器的$ 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
在花了很多时间处理这个问题之后，我就开始工作了
$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
});