在我正在开发的 Angular 应用程序中，我希望有一个抽象的父状态，该状态必须解析其所有子状态的某些依赖关系。具体来说，我希望所有要求经过身份验证的用户的状态都必须从某些authroot状态继承该依赖项。
我遇到了无法始终解决父依赖关系的问题。理想情况下，我想让父状态检查用户是否仍自动登录到任何子状态。在docs中，它说
Child states will inherit resolved dependencies from parent state(s), which they can overwrite.
我发现仅当我从父级以外的状态进入任何子级状态时才重新解析父级依赖性，但如果在同级状态之间移动则不会。
在此示例中，如果在状态authroot.testA和authroot.testB之间切换，则GetUser方法仅被调用一次。当您移至
other状态并返回时，它将再次运行。我能够将User依赖项放在每个子状态上，以确保每次您输入这些状态中的任何一个时都调用该方法，但这似乎违反了继承的依赖项的目的。
我对文档的理解不正确吗？有没有一种方法可以强制父状态重新解析其依存关系，即使状态在同级之间更改也是如此？
jsfiddle
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script>
(function(ng) {
var app = ng.module("Test", ["ui.router"]);
app.config(["$stateProvider", "$urlRouterProvider", function(sp, urp) {
urp.otherwise("/testA");
sp.state("authroot", {
abstract: true,
url: "",
template: "<div ui-view></div>",
resolve: {User: ["UserService", function(UserService) {
console.log("Resolving dependency...");
return UserService.GetUser();
}]}
});
sp.state("authroot.testA", {
url: "/testA",
template: "<h1>Test A {{User|json}}</h1>",
controller: "TestCtrl"
});
sp.state("authroot.testB", {
url: "/testB",
template: "<h1>Test B {{User|json}}</h1>",
controller: "TestCtrl"
});
sp.state("other", {
url: "/other",
template: "<h1>Other</h1>",
});
}]);
app.controller("TestCtrl", ["$scope", "User", function($scope, User) {$scope.User = User;}]);
app.factory("UserService", ["$q", "$timeout", function($q, $timeout) {
function GetUser() {
console.log("Getting User information from server...");
var d = $q.defer();
$timeout(function(){
console.log("Got User info.");
d.resolve({UserName:"JohnDoe1", OtherData: "asdf"});
}, 500);
return d.promise;
};
return {
GetUser: GetUser
};
}]);
})(window.angular);
</script>
</head>
<body ng-app="Test">
<a ui-sref="authroot.testA">Goto A</a>
<a ui-sref="authroot.testB">Goto B</a>
<a ui-sref="other">Goto Other</a>
<div ui-view>Loading...</div>
</body>
</html>
最佳答案
我发现ui-router与众不同的方式是您刚刚描述的行为。
让我们考虑一些实体，例如联系。因此，最好在右侧显示我们的“联系人”列表，在左侧显示详细信息。请检查The basics of using ui-router with AngularJS以快速了解布局。引用:
ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.
You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it.
好吧，那为什么呢？
因为我们可以有一个表示列表的
Contact状态。从详细信息的 Angular 说一个固定的列表。 (现在跳过列表分页筛选)我们可以单击列表，然后移至Contact.Detail(ID)状态，仅查看所选项目。然后选择另一个联系人/项目。这里有嵌套状态的优点:
The List (the state
Contact) is not reloaded. While the child stateContact.Detailis.
那应该可以解释为什么“怪异”行为应被视为正确。
要回答您的问题，如何处理用户状态。我会使用某个路由状态的最顶层同级，其 View 和 Controller 分离，并存在一些生命周期...在某些周期中触发
关于angularjs - Angular UI Router嵌套状态在子状态下解析，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20557119/