返回时保留先前状态的数据 - Angular 1.4 UI Router

Question

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

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

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

请帮助我实现此要求，而无需重新创建新的 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

您可以在您的状态中添加解析以将您想要的东西注入您的控制器。

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

.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 中获取数据（有时通过承诺）并将结果传递给的最佳实践控制器，以便状态不会在数据加载之前加载。

希望这对您有所帮助:)

返回时保留先前状态的数据 - Angular 1.4 UI Router

Persist data from the previous state while going back - Angular 1.4 UI Router

angularjs

angular-ui-router

url-routing