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

希望这会有所帮助：）

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

1 个答案: