Javascript 返回承诺后无法从控制器更新视图_Javascript_Angularjs_Parse Platform_Angularjs Scope_Promise

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

javascript angularjs parse-platform

Javascript 返回承诺后无法从控制器更新视图,javascript,angularjs,parse-platform,angularjs-scope,promise,Javascript,Angularjs,Parse Platform,Angularjs Scope,Promise,我有一个页面将显示项目列表。项目列表可以不断更改，因此每当用户转到此页面或刷新页面时，他都会看到新的项目列表我目前用于存储我的项目，我将使用承诺与解析API交互并获取我的项目。下面是一个非常简单的例子基本流程是，当显示index.html时，HomeCtrl.js将加载并调用ItemService.getItems（）以获取项目，将它们附加到$scope.items，然后显示对视图的任何更改。getItems（）是解析API提供的承诺 app.js var myApp = angular.m

我有一个页面将显示项目列表。项目列表可以不断更改，因此每当用户转到此页面或刷新页面时，他都会看到新的项目列表

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

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

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>

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

    $scope.items = [];

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

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

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

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

我是否在调用promise后错误地更新了$scope.items，或者是否存在一些我不理解的概念

感谢您的帮助

编辑

从456的回答中，我发现我在ng重复中犯了一个错误，他的回答有效。但是，我希望继续使用controllerAs语法。我已尝试在$scope.$apply函数中更新this.items，但它不起作用-this.items已被修改，但视图中未显示更改。我的修改如下

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>

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

你应该这样用html调用它-

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

出现错误的原因是，当控件指向then函数时，“this”将指向窗口对象

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

如果适用，请尝试此操作。

如果您在HTML中使用controllerAs语法，则不需要在控制器中使用$scope。您可以在控制器中此属性的此变量上添加这些元素。@MahendraSingh我必须在控制器中使用$scope才能使用$apply更新视图。有没有办法让我继续使用“this”并获得与$apply相同的效果？当然可以使用$scope.apply，但您的项目列表不必在范围内。@MahendraSingh请检查我的编辑。我使用$scope.$与this.items一起应用，并且视图未更新。我做错什么了吗？这是可行的，但有没有办法将控制器作为语法维护？您可以将控制器中的items对象声明为This.items=[]，而不是$scope.items=[]；请检查我的编辑。我将这些项声明为this.items并在$scope.$apply中对其进行修改，但视图没有更改。我做错什么了吗？