在返回时保留先前状态的数据 - Angular 1.4 UI 路由器

Question

我有一个Web应用程序，其中有许多基于URL更改的状态。 有一个User Management页面(包含搜索Input控件(，该页面根据搜索结果列出用户。

当单击特定User时，用户详细信息将通过不同的状态加载。我放了一个Button回到User Management页面。

要求是从页面返回时将搜索结果保留在User Management页面中User Detail。

请帮助我实现此要求，而无需创建新的 XHR 来再次获取搜索列表。

.state('userManagement', {
url: '/user-management',
templateUrl: 'components/userManagement/UserMgmt.view.html',
controller: 'UserMgmtCtrl',
controllerAs: 'vm'
})
.state('userDetail', {
url: '/user-detail/:userId',
templateUrl: 'components/userManagement/UserDetail.view.html',
controller: 'UserDetailCtrl',
controllerAs: 'vm'
})

我应该有嵌套状态或其他东西来实现这一点吗？

Answer 1

您可以在状态中添加解析，以在控制器中注入所需的内容。

使用角度服务来存储你的东西，因为它们是单例，这意味着它们只被实例化一次，因此存储在其中的数据总是相同的。

.state('userManagement', {
url: '/user-management',
templateUrl: 'components/userManagement/UserMgmt.view.html',
controller: 'UserMgmtCtrl',
controllerAs: 'vm',
resolve: {
yourStuff: function (StorageService) {
return StorageService.getStuff();
} 
}
})
.state('userDetail', {
url: '/user-detail/:userId',
templateUrl: 'components/userManagement/UserDetail.view.html',
controller: 'UserDetailCtrl',
controllerAs: 'vm',
resolve: {
yourStuff: function (StorageService) {
return StorageService.getStuff();
} 
}
})
app.factory("StorageService", function () {
var yourStuffStorage = {
"initial": "stuff"
};
return {
getStuff: getStuff,
setStuff: setStuff
};
function getStuff () {
return yourStuffStorage;
}
function setStuff (newStuff) {
yourStuffStorage = angular.copy(newStuff); 
}
})
app.controller("UserMgmtCtrl", function (yourStuff) {
console.log("do stuff with your stuff 1", yourStuff);
});
app.controller("UserDetailCtrl", function (yourStuff) {
console.log("do stuff with your stuff 2", yourStuff);
});

如果您想知道为什么我们不注入服务并查询数据，那是因为 ui-router 中的最佳实践是获取数据(有时通过承诺(并将结果传递给控制器，这样状态就不会在数据加载之前加载。

希望这对:)有所帮助