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,我只是手动更新结果变量作为示例.为简洁起见,我没有包含过滤器下拉列表.

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()的初始调用,因此您可以在搜索框中输入内容时看到更新.