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

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?

回答1:

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

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.

来源：https://stackoverflow.com/questions/27889083/how-to-wait-for-asynchronous-data-before-updating-ui-options