AngularJS - 使用服务作为一种模式，NG-重复不更新 [英] AngularJS - Using a Service as a Model, ng-repeat not updating

问题描述

我创建一个Ajax搜索页面将包含一个搜索输入框，系列过滤器下拉列表，然后一个UL其中显示结果。

I'm creating an ajax search page which will consist of a search input box, series of filter drop-downs and then a UL where the results are displayed.

由于搜索过滤器部分将在页面上一个单独的地方，我认为这将是创建一个服务，协调与输入和Ajax请求到搜索服务器端的交易是个好主意。这可以再由一对夫妇单独的控制器（一个用于搜索框和结果，以及一个用于过滤器）来调用。

As the filters part of the search will be in a separate place on the page, I thought it would be a good idea to create a Service which deals with coordinating the inputs and the ajax requests to a search server-side. This can then be called by a couple of separate Controllers (one for searchbox and results, and one for filters).

我与越来越结果当AJAX调用来刷新挣扎的主要东西。如果我直接在SearchCtrl控制器把AJAX，它工作正常，但是当我移动了ajax到服务停止更新结果时，对服务的查找方法被调用。

The main thing I'm struggling with is getting results to refresh when the ajax is called. If I put the ajax directly in the SearchCtrl Controller, it works fine, but when I move the ajax out to a Service it stops updating the results when the find method on the Service is called.

我敢肯定，这是一些简单的我已经错过了，但我似乎无法看到它。

I'm sure it's something simple I've missed, but I can't seem to see it.

标记：

<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：

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和我只是手动更新的结果变量作为一个例子。为了简便起见，我不包括过滤器下拉列表。

Here is a rough JSFiddle, I've commented out the ajax and I'm just updating the results variable manually as an example. For brevity I've not included the filter drop-downs.

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

我很新的AngularJS，所以如果我在完全错误的方式去一下，请告诉我这样：）

I'm very new to AngularJS, so if I'm going about it in totally the wrong way, please tell me so :)

推荐答案

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

In your HTML, you need to reference a property defined on your controller's $scope. One way to do that is to bind $scope.searchService.results to searchService.results once in your controller:

$scope.searchService.results = searchService.results;

现在这条线将工作：

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

在你的服务，使用 angular.copy（），而不是分配一个新的数组引用结果，否则控制器的$范围将失去其数据绑定：

In your service, use angular.copy() rather than assigning a new array reference to results, otherwise your controller's $scope will lose its data-binding:

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

小提琴。在小提琴，我注释掉最初的打电话找（），所以你可以看到，当你键入的东西在搜索框中的更新发生。

Fiddle. In the fiddle, I commented out the initial call to find(), so you can see an update happen when you type something into the search box.

这篇关于AngularJS - 使用服务作为一种模式，NG-重复不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！