Question

我有一个显示项目列表的页面。项目列表可以不断变化，因此无论何时使用此页面或刷新页面，他都会看到新的项目列表。

我目前使用Parse来存储我的项目，我将使用承诺与Parse API进行交互并获取我的项目。下面是一个非常简单的例子。

基本流程是当显示index.html时，HomeCtrl.js将加载并调用ItemService.getItems（）来获取项目，将它们附加到$ scope.items，然后显示对视图的任何更改。 ItemService.getItems（）是Parse API提供的promise。

app.js

var myApp = angular.module('myApp',[]);
// Parse API keys
Parse.initialize('MCNXFhdenmpSRN1DU8EJrG3YROXaX4bg0Q5IYwKp', 'XZfWd7J9xGSZQOizu0BoAtIUYtECdci4o6yR76YN');

的index.html

<html ng-app = 'myApp'>
<script src="//www.parsecdn.com/js/parse-1.6.2.min.js"></script>

<head>
    <title> My Simple Example that doesn't work! </title>
</head>

<body layout="row">

    <div ng-controller = "HomeCtrl as ctrl">
        <div ng-repeat="item in ctrl.items">
            {{item.id}}
        </div>
    </div>  

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src = "app.js"> </script>
    <script src = "HomeCtrl.js"> </script>
    <script src = "ItemService.js"> </script>

</body>
</html>

ItemService.js

var myApp = angular.module('myApp');
myApp.service('ItemService', function(){

// gets all Items
this.getItems = function() {
    var Item = Parse.Object.extend("Item");
    var query = new Parse.Query(Item);

    return query.find().then(function(items){
      return items;
    });
    return this;
  }

});

HomeCtrl.js

var myApp = angular.module('myApp');
myApp.controller('HomeCtrl',[ 'ItemService', '$scope',function(ItemService, $scope){

    $scope.items = [];

    ItemService.getItems()
        .then(function(results){
            $scope.$apply(function() {
                $scope.items = results;
                console.log($scope.items);
            });
        });

    console.log($scope.items);
}]);

$ scope.items确实在$ scope。$ apply函数中更改（我打印出来并且可以看到一些项目），但是视图没有更改。当我在ItemService.getItems（）之后打印$ scope.items时，我打印出一个空数组。

在调用承诺后我是否错误地更新了$ scope.items，还是有一些我不理解的概念？

感谢任何帮助。

修改

从456的答案开始，我看到我在ng-repeat中犯了一个错误并且他的答案有效。但是我想继续使用controllerAs语法。我试图在$ scope。$ apply函数中更新this.items但它不起作用 - this.items被修改，但更改未在视图中表示。我的修改如下

的index.html

<div ng-controller = "HomeCtrl as ctrl">
    <div ng-repeat="item in ctrl.items">
        {{item.id}}
    </div>
</div>

HomeCtrl.js

var myApp = angular.module('myApp');
myApp.controller('HomeCtrl',[ 'ItemService', '$scope',function(ItemService, $scope){

    this.items = [];

    ItemService.getItems()
        .then(function(results){
            $scope.$apply(function() {
                this.items = results;
                console.log(this.items);
            });
        });
}]);

Answer 1

你得到的错误是由于这个＆＃39;这个＆＃39;当控件进入你的函数时，它将指向窗口对象。

ItemService.getItems()
    .then(function(results){
        //Here 'this' will point to window 
       //window.items is undefined
    });

因此错误。

您可以通过多种方式解决此问题，其中一种方法是使用另一个对象指向此。

var myApp = angular.module('myApp');

myApp.controller('HomeCtrl',[ 'ItemService', '$scope',function(ItemService, $scope){

var that = this;
that.items = [];

ItemService.getItems()
    .then(function(results){
            that.items = results;
    });
}]);

如果适合您，请尝试此操作。

Answer 2

U应该像html一样调用它 -

 <div ng-repeat="item in items">

在返回承诺后，无法从控制器更新视图

2 个答案: