为什么我的AngularJS视图没有得到更新与Parse.com JavaScript SDK AJAX调用后

Why my AngularJS view is not getting updated after AJAX call with Parse.com JavaScript SDK?

本文关键字：JavaScript com Parse SDK AJAX 调用 更新 视图 AngularJS 我的 为什么      更新时间：2023-09-26

这是我的视图

<div ng-repeat="blog in blogs">
<h3>{{blog.title}}</h3>
<h4>{{blog.post}}</h4>
</div>

My Controller Code:

   demoApp.controller('myController', ['$scope', 'blogService', function ($scope,   
    blogService)
    {
        $scope.blogs = blogService.getBlogs();
    }]);

我在服务中的代码。这包括异步调用Parse.com javascript sdk。

this.getBlogs = function () 
{        
   var BlogPost = Parse.Object.extend("BlogPost");
   var blogPost = new BlogPost();
   var blogs  = [];
    var query = new Parse.Query(BlogPost);
    query.find({
        success: function(results) {
            console.log(results[0].get("title"));
            for (var i = 0; i < results.length; i++)
            {
                blogs.push(
                    {
                        title : results[i].get("title"),
                        post : results[i].get("post")
                    });
            }
            console.log(blogs);
        },
        error: function(error) {
            alert("Error: " + error.code + " " + error.message);
        }
    });
    return blogs;
}; });

控制台日志console.log(blogs);完美地显示返回的数据。只是在获取这个值后视图没有更新

回调中的代码在" Angular的世界之外"执行，这意味着$digest循环不会被触发，更改也不会反映在DOM中。

你需要使用$apply:

$apply()用于从外部执行angular中的表达式角框架。(例如，从浏览器DOM事件，setTimeout, XHR或第三方库)。因为我们正在呼叫angular框架需要执行合适的作用域生命周期异常处理，执行手表。

在您的服务中注入$rootScope，例如:

success: function(results) {
  $rootScope.$apply(function () { 
    console.log(results[0].get("title"));
    for (var i = 0; i < results.length; i++)
    {
        blogs.push(
            {
                title : results[i].get("title"),
                post : results[i].get("post")
            });
    }
    console.log(blogs);
  });
},

你的"success"回调是异步执行的，angular不知道它什么时候发生。要通知angular成功的回调，你可以把它包装在$scope.$apply

success: function(results) {
    $scope.$apply(function() {
        console.log(results[0].get("title"));
        for (var i = 0; i < results.length; i++)
        {
            blogs.push(
                {
                    title : results[i].get("title"),
                    post : results[i].get("post")
                });
        }
        console.log(blogs);
    });
}

让您的服务返回承诺!

<>之前.factory('factoryReturningPromise'， function (){．．．返回query.find ()不要犹豫(函数(结果){．．．//确保返回值是一个已解析的promise返回Parse.Promise.as(博客);}，函数(错误){//我们在这里是因为查询错误-返回被拒绝的承诺返回Parse.Promise.error(错误);}）;})之前

然后您只需要将其封装到控制器内的本地$scope.$apply中:

<>之前.controller('myController'， function ($scope, factoryReturningPromise) {适用范围。美元(函数(){blogService.getBlogs ()不要犹豫(函数(博客){美元的范围。博客=博客;}，函数(错误){…处理错误……向用户显示坏消息等}）;}）;})之前

这样，只有包含所有表的局部摘要循环才会被检查。

相关文章：