В приложении angular, над которым я работаю, я хотел бы, чтобы там было абстрактное родительское состояние, которое должно разрешать определенные зависимости для всех его дочерних состояний. В частности, я хотел бы, чтобы все состояния требовали, чтобы аутентифицированный пользователь наследовал эту зависимость от некоторого состояния authroot.
Я сталкиваюсь с проблемами, когда зависимость родителя не всегда решается. В идеале, я хотел бы, чтобы родительское состояние проверяло, что пользователь все равно регистрируется для любого дочернего состояния автоматически. В docs говорится:
Дочерние состояния наследуют разрешенные зависимости от родительского состояния (состояний), которые они могут перезаписать.
Я нахожу, что родительская зависимость решается только тогда, когда я ввожу какое-либо дочернее состояние из состояния вне родителя, но не при перемещении между состояниями сестры.
В этом примере, если вы перемещаетесь между состояниями authroot.testA и authroot.testB, метод GetUser вызывается только один раз. Когда вы перейдете в состояние other и обратно, он снова запустится.
Я могу установить зависимость User от каждого из дочерних состояний, чтобы гарантировать, что метод вызывается каждый раз, когда вы вводите какое-либо из этих состояний, но это, похоже, преследует цель унаследованной зависимости.
Я неправильно понимаю документы? Есть ли способ заставить родительское состояние повторно разрешать свои зависимости, даже когда состояние изменяется между братьями и сестрами?
<!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>
