个人中心
gpt4 book ai didi

javascript - 返回 promise 后无法从 Controller 更新 View

转载 作者：行者123 更新时间：2023-11-29 19:19:09 24 4
gpt4 key购买 nike

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

我目前使用 Parse 来存储我的项目，我将使用 promise 与 Parse API 交互并获取我的项目。下面是一个非常简化的示例。

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

应用程序.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>

项目服务.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 函数中发生了变化(我将其打印出来并可以看到一些项目)，但是它并没有针对 View 进行更改。当我在 ItemService.getItems() 之后打印 $scope.items 时，我打印出一个空数组。

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

感谢任何帮助。

编辑

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

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

最佳答案

您收到的错误是由于当控件进入您的 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;
    });
}]);

如果它适合你，试试这个。

关于javascript - 返回 promise 后无法从 Controller 更新 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33820023/

24 4 0
文章推荐： javascript - 如何将当前日期转换为数字格式？
文章推荐： java - android 短信权限棉花糖
文章推荐： android - DatePickerDialog 没有按预期工作
文章推荐： javascript - 为什么 'fetch function' 自动调用 'parse function' on backbone.js 集合？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com