如何刷新我的 ng-repeat？

Question

我有一个控制器（称为"catalogueController"）来管理我的搜索框和搜索页面。我让控制器最初将页面设置为在应用加载时自动调用"catalogueController" 中定义的搜索函数，以预加载我的项目数组（称为Inventory），以便通过页面中的ng-repeat 重复。

流程如下运行：
1. 我提交了搜索表单。
2."catalogueController"将搜索词发送到我的工厂（称为"Search"）。
3. "Search" 将具有一个函数，该函数将调用服务器以查询我的数据库以进行该特定搜索。
4.数据库会将搜索结果发送到"Search"工厂。
5."Search"工厂将结果发送到"catalogueController"控制器。
6."catalogueController" 将更新$scope.Inventory 以等于我收到的新结果。

我的问题是ng-repeat 不会自行刷新以显示我的新的和更新的$scope.Inventory 数组。 $scope.Inventory 肯定是更新了（我已经通过各种控制台日志确定了这一点）。

我也尝试过使用$scope.$apply()。它对我不起作用。

提前感谢您的帮助！

这是我的代码：

HTML 模板

<form role="search" class="navbar-form navbar-left" ng-controller="catalogueController" ng-submit="search(search_term)">
    <div class="form-group">
        <input type="text" placeholder="Search" class="form-control" ng-model="search_term">
    </div>
    <button type="submit" class="btn btn-default">Search</button>
</form>
<main ng-view></main>

catalogue.html 部分

<div id="main" class="margin-top-50 clearfix container">
<div ng-repeat="items in inventory" class="row-fluid">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail"><img src="image.jpg" alt="..." class="col-md-12">
            <div class="caption">
                <h3>{{ items.itemName }}</h3>
                <p>{{ items.description }}</p>
                <p><a href="#" role="button" class="btn btn-primary">Buy <a href="#" role="button" class="btn btn-default">More Info</a></a></p>
            </div>
        </div>
    </div>
</div>

"app.js" Angular 应用程序

var myApp = angular.module('qcbApp', ['ngRoute', 'ngCookies', 'appControllers']);

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/login', {
            templateUrl: 'html/partials/login.html',
            controller: 'registrationController'
        }).
        when('/sign-up', {
            templateUrl: 'html/partials/sign-up.html',
            controller: 'registrationController'
        }).
        when('/catalogue', {
            templateUrl: 'html/partials/catalogue.html',
            controller: 'catalogueController'
        }).
        when('/', {
            templateUrl: 'html/partials/qcbhome.html'
        }).
        otherwise({
            redirectTo: '/'
        });
    }]);

“catalogueController”控制器

myApp.controller('catalogueController', ['$scope', 'Search', function($scope, Search) {

var time = 0;

var searchCatalogue = function(search) {
    $scope.inventory = null;
    console.log("Controller -- "+search);
    Search.searchCatalogue(search)
    .then(function(results) {
        console.log(results);
        $scope.inventory = results;
    });
};

if(time == 0)
{
    searchCatalogue('');
    time++;
}
$scope.search = function(term) {
    searchCatalogue(term);   
}
}]);

“搜索”工厂

myApp.factory('Search', ['$http', '$q', function($http, $q) {

function searchCatalogue(term) {
    var deferred = $q.defer();

    console.log("Factory -- "+term);

    $http.post('/catalogue_data', {term: term}, {headers: {'Content-Type': 'application/json'}})
    .success(function(result) {
        console.log(result[0].SKU);
        deferred.resolve(result);
        console.log("Factory results -- "+result);
    });

    return deferred.promise;
}

return {
    searchCatalogue: searchCatalogue
}; //return
}]);

Answer 1

我认为问题是 ng-repeat 无法访问范围内的库存。您必须创建一个包含表单和 ng-repeat 的 div。

html 应该是：

<div ng-controller="catalogueController">
   <!-- Move the controller from the form to parent div -->
   <form role="search" class="navbar-form navbar-left" ng-submit="search(search_term)">
<div class="form-group">
    <input type="text" placeholder="Search" class="form-control" ng-model="search_term">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>

 <div id="main" class="margin-top-50 clearfix container">
  <div ng-repeat="items in inventory" class="row-fluid">
   <div class="col-sm-6 col-md-3">
    <div class="thumbnail"><img src="image.jpg" alt="..." class="col-md-12">
        <div class="caption">
            <h3>{{ items.itemName }}</h3>
            <p>{{ items.description }}</p>
            <p><a href="#" role="button" class="btn btn-primary">Buy <a href="#" role="button" class="btn btn-default">More Info</a></a></p>
        </div>
    </div>
  </div>
 </div>
</div>

Answer 2

我见过几次这样的情况，当您直接在 $scope 对象上更新属性时，与该值（例如库存）的数据绑定会出现有趣的问题。但是，如果您将数据绑定到对象的对象属性，则数据绑定将按预期工作。因此，例如使用 $scope 上的属性。我相信这是按价值复制与按参考复制的问题。

如下更新所有库存参考 $scope.data.inventory = result;

另外不要忘记在 html 模板中更新您的库存参考：

<div ng-repeat="items in data.inventory" class="row-fluid">

更新：我做了这件事来弄清楚 - http://plnkr.co/edit/0ZLagR?p=preview

我认为主要问题是您指定了两次控制器。我从表单中删除了它，它开始工作了。