Question

新年快乐！

有一件事是我无法得到的，如果你帮助我，我将不胜感激。在1.0.8和1.2.7 Angular版本之间ng-repeat和ajax逻辑有什么变化？我查了changelog但没有找到任何帮助。

我有带有angular和mongodb DB的node.js站点。 node.js端的逻辑通过ajax返回json中某些对象的列表。我也用ngRoute。

我的问题是这个代码在角度1.0.8版本中工作正常。但如果我更新到最新的1.2.7，那么它不起作用。带有div搜索的模板的一部分显示正常，但是没有应该由ng-repeats生成的div。浏览器控制台中没有任何错误。 Json响应通过Ajax返回正常。

我尝试在我的模板中重用Angular ng-repeat sample中的代码，它在Angular 1.2.7中对我来说很好用。但我的代码不起作用。

我在另一个html文件中定义了这样的模板代码：

<div class="col-xs-12 col-sm-9">
    <div>
        Search
        <input type="text" ng-enter="updateQuery()" ng-model="query"/>
    </div>
    <div class="row">
        <!-- these divs with ng-repeat aren't rendered-->
        <div>
            <div class="btn-group filter-buttons" ng-repeat="n in [] | range:recipes.pageCount">
                <a class="btn btn-default" ng-class="{active: n==recipes.pageNumber}" href="#/list/{{n}}/{{query}}">{{ n }}</a>
            </div>
        </div>
        <div class="col-6 col-sm-6 col-lg-4" ng-repeat="recipe in recipes.items">
            <h2>Recipe <a class="btn-details btn btn-default" href="#/details/{{recipe._id}}">Details »</a></h2>
            <img class="recipe-preview" ng-repeat="hash in recipe.MappedPhotos" src="/picture/{{hash}}"/>
            <p> {{ recipe.Description | truncate:250 }}</p>
        </div>
    </div>
</div>

然后我有这样的ajax工厂：

app.factory('recipeService', function($http) {
    return {
        getRecipes: function(pageNumber) {
            var url = '/api/recipe/?pageNumber=' + pageNumber;
            return $http.get(url).then(function(result) {
                    // this method called fine and returns correct result
                    return result.data;
                });
        }
    }
});

这样的角度控制器：

app.controller('RecipesListCtrl', function($scope, recipeService, $routeParams, $location) {

    $scope.pageNumber = !$routeParams.pageId ? 1 : $routeParams.pageId;

    $scope.updatePage = function(n){
        $scope.recipes = recipeService.getRecipes(n);
    };

    $scope.updatePage($scope.pageNumber);
});

这是我的ajax请求\响应：

请求：

GET http://localhost:3001/api/recipe/?pageNumber=1 HTTP/1.1
Host: localhost:3001
Connection: keep-alive
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Referer: http://localhost:3001/
Accept-Encoding: gzip,deflate,sdch

响应：

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 54057
ETag: "1790659200"
Date: Sat, 04 Jan 2014 18:08:26 GMT
Connection: keep-alive

{
  "items": [
    // some data here
  ],
  "pageNumber": "1",
  "pageSize": 20,
  "pageCount": 55
}

谢谢！

Answer 1

您不能再在角度模板中直接使用promises了。相反，您必须使用实际的数组。见http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises：

在：

$scope.foo = $http({method: 'GET', url: '/someUrl'});

<p>{{foo}}</p>

后：

$http({method: 'GET', url: '/someUrl'})
  .success(function(data) {
    $scope.foo = data;
  });

<p>{{foo}}</p>

此功能已被弃用。如果绝对需要，可以通过$ parseProvider.unwrapPromises（true）API重新启用它。

Angular ng-repeat和ajax在1.0.8和1.2.7之间变化

1 个答案: