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 partial

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

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

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

如何刷新ng-repeat？

2 个答案: