Обновления модели AngularJS, но просмотр не используется при использовании $ cookieStore

Question

У меня есть поисковая страница в моем приложении AngularJS, которая по существу состоит из представления, которое содержит форму поиска (и отображает результаты) и контроллер, который обрабатывает поиск запрос. Когда пользователь вводит в поисковый запрос и нажимает «Поиск», вызывается метод $ scope.submit(), и я вижу результаты правильно. Однако, когда пользователь нажимает на результат и затем возвращается на страницу поиска, он пуст. Я думал о внедрении решения на основе $ cookieStore, чтобы запрос хранился в файле cookie, и всякий раз, когда пользователь возвращается на страницу поиска, он автоматически повторно запускает предыдущий поиск, поэтому им не нужно делать это вручную. Проблема в том, что обновление модели (поиск запускается из значения cookieStore), но представление остается тем же (пустое). Вот пример моего контроллера:

.controller('SearchCtrl', ['$scope', '$http', '$cookieStore','authService', function($scope, $http, $cookieStore, authService) { 

var submitted = false; 
$scope.submit = function(query){ 
    $cookieStore.query = query; 
    submitted = true; 

    $http.jsonp(url).success(function(data) { 
     $scope.searchResults = data; 
    }); 
} 

/* 
    Rerun query if user has pressed "back" or "home" button automatically: 
*/ 
if(!submitted && $cookieStore.query){ 
    console.log("submitting query from cookie store", $cookieStore.query); 
    $scope.submit($cookieStore.query); 
} 
... }); 

Я попытался с помощью $ объем $ применить() после автоматического поиска, но до сих пор нет радости.. Вид просто не будет обновляться. Любые намеки, которые вы, ребята, могли мне дать? Cheers

Answer 1

Вы должны поместить $scope.$apply в конце своей функции обратного вызова. Это потому, что $http делает асинхронный вызов AJAX и к моменту ответа возвращается Угловое уже сделано auto- $applying изменений. Поэтому, когда вы проверяете модель, вы видите разницу, но поскольку Угловая больше не $applying, разница не может быть видна на экране.

Итак, когда вы добавляете $scope.$apply вы будете иметь что-то вроде этого:

.controller('SearchCtrl', ['$scope', '$http', '$cookieStore','authService', function($scope, $http, $cookieStore, authService) { 

var submitted = false; 
$scope.submit = function(query){ 
    $cookieStore.query = query; 
    submitted = true; 

    $http.jsonp(url).success(function(data) { 
     $scope.searchResults = data; 
     $scope.$apply(); 
    }); 
} 

/* 
    Rerun query if user has pressed "back" or "home" button automatically: 
*/ 
if(!submitted && $cookieStore.query){ 
    console.log("submitting query from cookie store", $cookieStore.query); 
    $scope.submit($cookieStore.query); 
} 
... });