AngularJS UI 路由器的“resolve”觸發兩次
[英]AngularJS UI router's "resolve" fires twice
問題描述
我正在使用Angular 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 使用了多個嵌套視圖，我會盡力說明
索引.html
<html>
<div ui-view></div> <!-- /static/partials/home.html gets injected here -->
</html>
/靜態/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});
}
這會更新 url，從變成這樣的東西
/#/reader/<my path>
像這樣
/#/reader/<my_path>?page=2
現在是讓我把頭發扯掉的部分。
我回到路由的閱讀器部分中的“解決”代碼塊。
警報消息出現兩次。
通過在 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);
在第一個警報觸發之前不更改 url，但會在第二個警報處/附近更改 url 嗎？
編輯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);
3 個解決方案
解決方案1
1 2016-04-28 23:16:52
我遇到了這個問題，發現這是因為我在代碼的其他地方手動調用了我的解析函數。 在您的代碼中搜索panelContent() ，您可能會發現它再次被觸發的位置。
解決方案2
0 2017-07-21 10:05:23
我有這個問題。 原因在我的 html 模板中。 我在子元素和父元素中都使用了ui-sref指令
<li ui-sref="{{r.name}}" ng-class="vm.isCurrent(r)" ng-repeat="r in vm.settingsRoutes"> <span ui-sref="{{r.name}}" ng-bind-html="r.title"></span> </li>
所以當我點擊span時，我觸發了stateChange兩次。
解決方案3
0 2019-04-29 22:04:53
我有同樣的錯誤。 我發現我在其中一個解析函數中被更改$stateParams 。 解決方案是從此對象制作副本，然后使用副本執行您想要的操作。
resolve: {
/** @ngInject */
searchParams: function ($stateParams) {
let params = angular.copy($stateParams); // good
// good:
if (params.pending === undefined) {
params.pending = true;
}
// bad:
if ($stateParams.redirect === 'true') {
$stateParams.pending = false; // this line changing the URL
}
return params;
},
}
AngularJS ui路由器（解析部分）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.