Как сохранить мои данные при нажатии кнопки «Назад»?

Инициировать вызов API при нажатии кнопки «Назад» в браузере, когда для параметра reloadOnSearch установлено значение false

Поскольку я установил reloadOnSearch равным false, я использую $ routeUpdate для идентификации нажатия кнопки "Назад" в браузере. В настоящее время, когда это срабатывает, я перезагружаю страницу. Но эта перезагрузка приводит к потере всех данных ответов на вызовы API, которые я храню. Есть ли способ предотвратить эту потерю данных?

Я показываю список данных с нумерацией страниц на своем сайте. Каждый раз, когда пользователь меняет страницу, запускается функция, которая проверяет, были ли уже получены данные. Если нет, для его извлечения выполняется вызов API. Поскольку я установил reloadOnSearch равным false, нажатие кнопки «Назад» в браузере меняет только URL-адрес, а не представление. В данном случае я использую $routeUpdate. Когда срабатывает $routeUpdate, я сначала проверяю, произошло ли это из-за щелчка на странице или нажатия кнопки «Назад». В случае нажатия на страницу выполняется обычный вызов API. Но если это было из-за кнопки «Назад», я перезагружаю страницу. Но это приводит к потере всех полученных ранее данных ответа, чего хотелось бы избежать. Очевидным решением будет вызов функции вызова API в обратном вызове $routeUpdate. Но проблема в том, что на моем сайте есть несколько списков данных, и я стараюсь избегать написания нескольких условных выражений и вызовов функций в файле app.run(). Можно ли каким-либо образом сохранить свои данные при нажатии кнопки "Назад"?

Эта часть кода находится в app.run()

$rootScope.$on('$routeUpdate', function(event, next){
    console.log("route update fired");
    // This gives me the parameters in the URL (eg.page number)
    let params = JSON.stringify(next.params);
    console.log(params); // Eg. {listTransactionsPage: 2}
    // Now I will compare this with the $rootScope value which is saved in the controller (See the code below for more details).
    if(params !== JSON.stringify($rootScope.listCurrentParams))){
            console.log("back/forward button clicked.");
            $route.reload();
        }
        else{
            console.log("route changed via pagination");
        }
    }
});

Эта часть кода находится в app.controller().

app.controller('listTransCtrl', ['$scope', '$location', '$window', '$rootScope', function($scope, $location, $window, $rootScope){
    console.log("Inside listTransCtrl.");
    $rootScope.listCurrentParams = {};
    // the function that gets called upon pagination button click..
    $scope.listTransPageChanged = function(pageNum){
        console.log(pageNum);
        $location.search('listTransactionsPage', pageNum);
        $rootScope.listCurrentParams = $location.search();
        console.log($rootScope.listCurrentParams);
        // the API call gets fired
        $scope.getAllTransFunc();
    }

}]);

person ashima panjwani    schedule 06.07.2019    source источник
comment
Вызов $route.reload() приводит к уничтожению элемента ng-view контроллер и его границы. Затем он создает новую область и повторно создает экземпляр контроллера. Любые данные, которые должны сохраниться, должны храниться в сервисе. ($rootScope можно использовать, но не рекомендуется.)   -  person georgeawg    schedule 06.07.2019
comment
@georgeawg спасибо за предложение. Попробуем и сообщим, как все получится   -  person ashima panjwani    schedule 07.07.2019


Ответы (1)


Спасибо @georgeawg за предложение этого решения. Раньше я хранил все данные ответов на вызовы API в $scope в контроллере. Но, сохранив эти данные в сервисе, я смог предотвратить их потерю во время $route.reload().

Если вы хотите узнать, как хранить данные в сервисе, перейдите по этой ссылке:

Рекомендации Angularjs для хранилища данных

person ashima panjwani    schedule 11.07.2019