如何等待异步数据更新UI的选项之前， [英] How to wait for asynchronous data before updating ui-options

问题描述

我想创建这样的用户界面选项图：

I'm trying to create a graph with ui-options like this:

<div ui-jq="plot" ui-options="
      [
        { label: 'Strongly Agree', data: {{stronglyAgree}} },
        { label: 'Agree', data: {{agree}} },
        { label: 'Disagree', data: {{disagree}} },
        { label: 'Strongly Disagree', data: {{stronglyDisagree}} },
        { label: 'N/A', data: {{na}} }
      ]
    " style="height:240px"></div>

但在双大括号中的数据还没有到达，所以它读作空，抛出错误。这是一个指令里面的：

But the data in double-curly brackets hasn't arrived yet, so it reads as empty and throws errors. This is inside a directive:

function latestSurvey(){
    return {
        restrict: 'E',
        templateUrl: 'js/modules/survey/latest.html',
        scope: {
            survey: '='
        },
        controller: function($scope){
            $scope.$watch('survey', function (newValue) {
                if (!newValue) { return; }

                var survey = $scope.survey;

                var stronglyAgree = [];
                var agree = [];
                var disagree = [];
                var stronglyDisagree = [];
                var na = [];

                for (var i=0; i<survey.questions.length; i++) {

                    var tempArray = [];
                    tempArray[0] = i*8;
                    tempArray[1] = survey.questions[i].answers[0].count;
                    stronglyAgree.push(tempArray.slice());

                    tempArray[1] = survey.questions[i].answers[1].count;
                    agree.push(tempArray.slice());

                    tempArray[1] = survey.questions[i].answers[2].count;
                    disagree.push(tempArray.slice());

                    tempArray[1] = survey.questions[i].answers[3].count;
                    stronglyDisagree.push(tempArray.slice());

                    tempArray[1] = survey.questions[i].answers[4].count;
                    na.push(tempArray.slice());
                }
                $scope.stronglyAgree = stronglyAgree;
                $scope.agree = agree;
                $scope.disagree = disagree;
                $scope.stronglyDisagree = stronglyDisagree;
                $scope.na = na;
            });
        }
    }
}

正如你所看到的，我等待的对象设置此数据之前被检索。我怎么能告诉角度应用UI选项前等待的时间？

As you can see, I'm waiting for the object to be retrieved before setting this data. How can I tell angular to wait before applying the ui-options?

推荐答案

您可以只作$范围变量等待检查结果。这也将简化你的逻辑：

You could just make the $scope variables wait by checking the results. It would also simplify your logic:

function latestSurvey(){
    return {
        restrict: 'E',
        templateUrl: 'js/modules/survey/latest.html',
        scope: {
            survey: '='
        },
        controller: function($scope){
            $scope.$watch('survey', function (newSurvey) {
                if (newSurvey && newSurvey.questions.length > 0) {  
                    var survey = newSurvey;
                    $scope.stronglyAgree = [];
                    $scope.agree = [];
                    $scope.disagree = [];
                    $scope.stronglyDisagree = [];
                    $scope.na = [];

                    for (var i=0; i<survey.questions.length; i++) {

                        var tempArray = [];
                        tempArray[0] = i*8;
                        tempArray[1] = survey.questions[i].answers[0].count;
                        $scope.stronglyAgree.push(tempArray.slice());

                        tempArray[1] = survey.questions[i].answers[1].count;
                        $scope.agree.push(tempArray.slice());

                        tempArray[1] = survey.questions[i].answers[2].count;
                        $scope.disagree.push(tempArray.slice());

                        tempArray[1] = survey.questions[i].answers[3].count;
                        $scope.stronglyDisagree.push(tempArray.slice());

                        tempArray[1] = survey.questions[i].answers[4].count;
                        $scope.na.push(tempArray.slice());
                    }
                } else  { return; }
            });
        }
    }
}

<一个href=\"http://stackoverflow.com/questions/27800668/asynchronus-calls-in-angularjs/27801009#27801009\">I做另一篇文章有​​关如何在AngularJS 同时使用回调和承诺，妥善处理异步活动。其他答案仅指递延方案，并没有实际的异步活动AngularJS。

I made another post about how to properly handle asynchronous activity in AngularJS using both callbacks and promises. The other answers refer only to deferred scenarios and not actually asynchronous activity in AngularJS.

这篇关于如何等待异步数据更新UI的选项之前，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！