如何在等待异步数据更新UI选项前(How to wait for asynchronous data

我试图创建一个这样的UI选项图：

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

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

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选项之前要等待？

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

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

我又一篇关于如何在AngularJS妥善处理异步活动同时使用回调和承诺。其他答案仅指延迟情形和AngularJS实际上不是异步活动。