Question

我正在尝试用这样的ui-options创建一个图形：

<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-options之前告诉angular等待？

Answer 1

您可以通过检查结果让$ scope变量等待。它还可以简化您的逻辑：

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同时使用回调和承诺。其他答案仅涉及延迟场景，而不是AngularJS中的实际异步活动。

如何在更新ui-options之前等待异步数据

1 个答案: