AngularJS - 使用服务作为模型，ng-repeat 不更新 [英] AngularJS - Using a Service as a Model, ng-repeat not updating

问题描述

我正在创建一个 ajax 搜索页面，该页面将包含一个搜索输入框、一系列过滤器下拉列表以及一个显示结果的 UL.

由于搜索的过滤器部分将位于页面上的单独位置，我认为创建一个服务来处理协调输入和对搜索服务器端的 ajax 请求是个好主意.然后可以由几个单独的控制器调用(一个用于搜索框和结果，另一个用于过滤器).

我正在努力解决的主要问题是在调用 ajax 时刷新结果.如果我将 ajax 直接放在 SearchCtrl 控制器中，它工作正常，但是当我将 ajax 移出到服务时，它会在调用服务上的 find 方法时停止更新结果.

我确定这是我遗漏的一些简单内容，但我似乎看不到它.

标记:

<div data-ng-controller="SearchCtrl"><div class="搜索"><h2>搜索</h2><div class="box"><input type="text" id="search" maxlength="75" data-ng-model="search_term" data-ng-change="doSearch()" placeholder=键入以开始搜索..."/></div>
<div class="search-summary"><p><span class="field">您搜索的是:</span>{{ search_term }}</p>

<div class="结果"><ul><li data-ng-repeat="searchService.results 中的项目"><h3>{{ item.title }}</h3>

AngularJS:

var app = angular.module('jobs', []);app.factory('searchService', function($http) {var 结果 = [];函数查找(术语){$http.get('/json/search').success(function(data) {结果 = data.results;});}//公共API返回 {结果:结果，找:找};});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 非常陌生，所以如果我以完全错误的方式进行，请告诉我 :)

解决方案

在您的 HTML 中，您需要引用在控制器的 $scope 上定义的属性.一种方法是在控制器中将 $scope.searchService.results 绑定到 searchService.results 一次:

$scope.searchService.results = searchService.results;

现在这条线可以工作了:

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

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

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

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.

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

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.

Markup:

<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();
}]);

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/

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

解决方案

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;

Now this line will work:

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

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-repeat 不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！