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

问题描述

我正在尝试使用这样的 ui 选项创建图表:

但是双大括号中的数据还没有到达，所以它读为空并抛出错误.这是在指令中:

function latestSurvey(){返回 {限制:'E'，templateUrl: 'js/modules/survey/latest.html',范围: {调查:'='},控制器:功能($范围){$scope.$watch('survey', function (newValue) {如果 (!newValue) { 返回;}var 调查 = $scope.survey;var strongAgree = [];var 同意 = [];var 不同意 = [];var strongDisagree = [];var na = [];for (var i=0; i

如您所见，在设置此数据之前，我正在等待检索对象.如何在应用 ui 选项之前告诉 angular 等待?

解决方案

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

function latestSurvey(){返回 {限制:'E'，templateUrl: 'js/modules/survey/latest.html',范围: {调查:'='},控制器:功能($范围){$scope.$watch('survey', function (newSurvey) {如果 (newSurvey && newSurvey.questions.length > 0) {var 调查 = 新调查；$scope.stronglyAgree = [];$scope.agree = [];$scope.disagree = [];$scope.stronglyDisagree = [];$scope.na = [];for (var i=0; i

我发表了另一篇关于如何在 AngularJS 中正确处理异步活动的帖子使用回调和承诺.其他答案仅涉及延迟场景，而不是 AngularJS 中的实际异步活动.

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?

解决方案

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.

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