Сохранить данные из предыдущего состояния при переходе назад - Angular 1.4 UI Router - PullRequest
Новая
       12

Сохранить данные из предыдущего состояния при переходе назад - Angular 1.4 UI Router

0 голосов
/ 25 мая 2018

У меня есть веб-приложение, в котором есть много состояний, основанных на изменении 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'
  })

Должен ли я иметь вложенные состояния или что-то для этого?

1 Ответ

0 голосов
/ 25 мая 2018

Вы можете добавить решает в ваших штатах, чтобы добавить то, что вы хотите в ваших контроллерах.

Используйте угловую службу для хранения ваших вещей, потому что они являются синглетонами, то есть они создаются только один раз, поэтому данные, хранящиеся в них, всегда одинаковы. 

.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 считается оптимальной практикой извлекать данные (иногда через обещания) и передавать результат в контроллер, чтобы состояние не загружалось дозагрузка данных.

Надеюсь, это поможет:)

...