angularjs 让当前路由重新加载_AngularJS UI路由器 - 在不重新加载状态的情况下更改URL...

wiherek..

48

好的,已经解决了 :) 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是一个目的,可读性另一个.