Zac*_*ack 5 javascript routing angularjs nested-views angular-ui-router
我正在使用角度ui路由器来处理前端的某些路由。这就是我的路由代码的样子。
// angular config
$stateProvider.state('app', {
templateUrl: '/static/partials/home.html',
controller: 'NavCtrl'
});
$stateProvider.state('app.reader', {
url : '/reader/*path?start&end&column&page',
templateUrl: '/static/partials/reader.html',
resolve : {
panelContent : [
'$state', '$stateParams', '$http',
function ($state, $stateParams, $http) {
alert('resolving panel Content');
return []; // simplest thing possible to illustrate my point
}
]
},
controller: 'ReaderCtrl'
});
/// etc etc
$urlRouterProvider.otherwise('/reader/');
我的html使用了多个嵌套视图，我会尽力说明
index.html
<html>
<div ui-view></div> <!-- /static/partials/home.html gets injected here -->
</html>
/static/home.html
<html>
<!-- some side bar stuff -->
<!-- reader -->
<div ui-view></div> <!-- /static/partials/reader.html gets injected here -->
</html>
所以我要进行多层嵌套
-- index.html
-- home.html
-- reader.html
现在，当我第一次加载页面时，我的警报消息
alert('resolving panel Content');
只触发一次..这是有道理的。但是，假设我在分页中单击“下一页”。
<!-- inside /static/partials/reader.html -->
<uib
pagination total-items= "totalItems"
ng-model= "pageNumber"
ng-change= "pageUpdate"
max-size= "maxPageNumbersDisplayed"
></uib>
这最终会在我的“ ReaderCtrl”中触发一个函数
$scope.pageUpdate(page) {
$state.go( '.', {page: page});
}
这会将网址更新为类似这样的内容
/#/reader/<my path>
像这样
/#/reader/<my_path>?page=2
现在，让我把头发拔掉的部分。
我回到路由阅读器部分的“ resolve”代码块。
警报消息发生两次。
通过在Web控制台中进行一些调试，我发现订单已经完成
1) alert message in resolve
2) travel through the entirety of ReaderCtrl
3) lots and lots of angular calls
4) alert message (2nd time)
5) travel through entirety of ReaderCtrl a second time.
您可能会想知道NavCtrl中发生了什么，但是我没有在那打任何电话。NavCtrl中的所有内容都是ReaderCtrl可以继承的函数，以便更新/static/partials/home.html的范围
如此看来，我似乎停留在这里的第3步。
有人对我的决心障碍为何被开除两次有任何想法吗？
编辑：
经过更多的调试之后，我似乎发现该命令的执行顺序是这样，从“ updatePage”函数执行后立即开始。
1) first "resolving message"
-- the url has not yet changed
2) second "resolving message"
-- the url appears to have changed very shortly before this message
所以，我想我的问题是...为什么
$state.go('.', args);
在第一个警报触发之前，请勿更改网址，但是是否会在第二个警报/附近更改网址？
编辑2：最终无法解决我的问题，所以我暂时解决了这个问题……我基本上做了一个函数，该函数假定$ state.go（）在幕后进行，并构造了网址。
function _mk_url(args) {
var url = "/reader";
var pageNumber = args.pageNumber || 1;
url += "?page=" + pageNumber;
var columns = args.columns || [];
columns.forEach(function(d) {
url += "&column=" + d;
});
//etc..
return url;
}
var args = {"columns" : ["a", "b", "c"], "pageNumber" : 2};
var url = _mk_url(args);
$location.url(url);