AngularJS-使用服务作为模型，ng-repeat不更新

Question

我正在创建一个ajax搜索页面，该页面将由搜索输入框，一系列过滤器下拉列表以及随后显示结果的UL组成。

由于搜索的过滤器部分将在页面上的单独位置，因此我认为创建一个服务来协调输入和搜索服务器端的Ajax请求是一个好主意。然后可以通过几个单独的控制器来调用（一个用于搜索框和结果，另一个用于过滤器）。

我一直在努力的主要事情是在调用ajax时获得刷新结果。如果我将ajax直接放在SearchCtrl控制器中，则可以正常工作，但是当我将ajax移至Service时，当调用Service上的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，而我只是作为示例手动更新了result变量。为简便起见，我没有包括过滤器下拉列表。

http://jsfiddle.net/XTQSu/1/

我是AngularJS的新手，所以如果我以完全错误的方式进行操作，请告诉我:)

Answer 1

在您的HTML中，您需要引用在控制器的$
scope上定义的属性。要做到这一点的方法之一是绑定$scope.searchService.results到searchService.results曾经在你的控制器：

$scope.searchService.results = searchService.results;

现在此行将起作用：

<li data-ng-repeat="item in searchService.results">

在您的服务中，请使用，angular.copy()而不要给分配新的数组引用results，否则控制器的$ scope将失去其数据绑定：

var new_results = [{ 'title': 'title 3' }, 
                   { 'title': 'title 4' }];
angular.copy(new_results, results);

小提琴。在小提琴中，我注释掉了对find（）的初始调用，因此当您在搜索框中键入内容时，您会看到更新的发生。