使用angularjs在html中加载异步解析数据答案

【问题标题】：Loading asynchronous parse data inside html using angularjs使用angularjs在html中加载异步解析数据
【发布时间】：2015-07-10 19:38:09
【问题描述】：

我正在尝试快速测试以调试为什么我的某些代码没有按预期工作。

我有一个名为 testCtrl 的控制器和一个服务 myService 。在服务中，我正在尝试从 Parse 获取数据，一旦获得数据，我会尝试将此数据加载到我的前端 html 中。

代码如下：

app.controller('testCtrl', function($scope,myService) {
var currentUser = Parse.User.current();

$scope.username = currentUser.getUsername();
$scope.test = "ths";
var promise1 = myService.getEvaluatorData();
promise1.then(function(response){
    $scope.results2 = response;
    console.log(response);
    });
});

app.factory('myService', function(){
 return {
   getAllData: function($scope){
      getEvaluatorData($scope);
   },

   getEvaluatorData: function(){

       var evaluators = Parse.Object.extend("Evaluators");
       query = new Parse.Query(evaluators);

       return query.find({
          success: function(results){
            angular.forEach(results, function(res){

                console.log("Looped"); //this is just to verify that the then call below is executed only after all array objects are looped over.
            });

          } ,
          error: function(error){

          }
       });
   }
  }
});

这是我要显示数据的 html 代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="testCtrl">
{{test}}

{{results2}}
</body>
</html>

results2 不会加载到 html 中。

这是控制台日志。

testParse.js:46 This is done
2015-07-10 15:28:32.539testParse.js:46 This is done
2015-07-10 15:28:32.540testParse.js:46 This is done
2015-07-10 15:28:32.541testParse.js:46 This is done
2015-07-10 15:28:32.542testParse.js:56 Returning result as promised [object Object],[object Object],[object Object],[object Object]

【问题讨论】：

Imo 你完全搞砸了。你应该使用角度路由器或指令 - 取决于目的。
@PawełSmołka 抱歉，我是 angularjs 的初学者，您能详细说明一下吗？非常感谢！
如果您想要自定义视图，请使用 ng-view。如果你想把自定义计算内容使用指令，可以与工厂功能混合。您在 angular api-reference 中获得了指令描述。如果您阅读本文，您将找到您的解决方案。我今天太忙于我的新生儿，无法写更多：/
@PawełSmołka 感谢您的帮助。你肯定对我有一些线索。我会调查的。再次感谢！

标签： javascript html angularjs parse-platform javascript-databinding

【解决方案1】：

您需要 return 服务中的数据并将其传递给您的控制器。例如：

app.controller('testCtrl', function ($scope, myService) {
    var currentUser = Parse.User.current();
    $scope.username = currentUser.getUsername();
    $scope.test = "this";
    myService.getEvaluatorData().then(function (response) {
        console.log('response', response);
        $scope.results2 = response;
    });
});

app.factory('myService', function ($http, $q) {
    return {
        getEvaluatorData: function () {
            var evaluators = Parse.Object.extend("Evaluators");
            var query = new Parse.Query(evaluators);

            return query.find({
                success: function (results) {
                    return results;
                },
                error: function (error) {
                   return error;
                }
            });
        }
    }
});

另外，我认为调用this.getEvaluatorData($scope) 没有意义，当你可以直接调用getEvaluatorData 方法时

【讨论】：

这是我如何使用 Parse gist.github.com/jforaker/e5040d19b9e69e44769b 的示例，希望对您有所帮助
另外你可能想先初始化一个空数组，比如：$scope.results2 = []

【解决方案2】：

使用 $rootScope.result2 而不是 $scope.result2

【讨论】：