我創建了一個ajax搜索頁面,該頁面將包含一個搜索輸入框,一系列過濾器下拉菜單,然後是顯示結果的UL。由於過濾器的搜索部分將位於頁面上的一個獨立位置,因此我認爲創建一個處理協調輸入和ajax請求到搜索服務器端的服務是一個不錯的主意。然後可以由幾個單獨的控制器(一個用於搜索框和結果,另一個用於過濾器)調用。AngularJS - 使用服務作爲模型,ng-repeat不更新
我正在努力掙扎的主要事情是調用ajax時刷新結果。如果我將ajax直接放在SearchCtrl控制器中,它可以正常工作,但是當我將ajax移出到某個服務時,它停止在調用服務上的find方法時更新結果。
我敢肯定,這是簡單的我錯過了,但我似乎無法看到它。
標記:
<div ng-app="jobs">
<div data-ng-controller="SearchCtrl">
<div class="search">
<h2>Search</h2>
<div class="box"><input type="text" id="search" maxlength="75" data-ng-model="search_term" data-ng-change="doSearch()" placeholder="Type to start your search..." /></div>
</div>
<div class="search-summary">
<p><span class="field">You searched for:</span> {{ search_term }}</p>
</div>
<div class="results">
<ul>
<li data-ng-repeat="item in searchService.results">
<h3>{{ item.title }}</h3>
</li>
</ul>
</div>
</div>
</div>
AngularJS:
var app = angular.module('jobs', []);
app.factory('searchService', function($http) {
var results = [];
function find(term) {
$http.get('/json/search').success(function(data) {
results = data.results;
});
}
//public API
return {
results: results,
find: find
};
});
app.controller("SearchCtrl", ['$scope', '$http', 'searchService', function($scope, $http, searchService) {
$scope.search_term = '';
$scope.searchService = searchService;
$scope.doSearch = function(){
$scope.searchService.find($scope.search_term);
};
$scope.searchService.find();
}]);
這是一個粗略的jsfiddle,我已經註釋掉Ajax和我只是手動更新的結果變量作爲一個例子。爲了簡潔起見,我沒有包括濾波器下拉菜單。
我很新的AngularJS,所以如果我在完全錯誤的方式去了解它,請告訴我這樣:)
謝謝馬克。這是'angular.copy'部分,這是難題的一部分。 – 2013-03-12 09:40:38
這對我來說是完全意義上的。我曾在3個其他服務/控制器上工作,但他們只是我推動的陣列,所以綁定從未打破。如果您完全替換陣列/對象,則需要使用副本!謝謝! – LukeP 2014-10-13 22:19:11