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); 
} 
... }); 

我試過使用$ scope。$ apply（）後自動搜索但仍然沒有快樂。該視圖不會更新。你們可以給我什麼提示？歡呼聲

Answer 1

您應該將$scope.$apply放在回調函數的末尾。這是因爲$http進行異步AJAX調用，並通過時間反饋回來Angular已經完成自動$applying更改。所以當你檢查模型時，你會發現差異，但是由於Angular不再是$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); 
} 
... });