비동기 로딩/

Question

나는 아래와 같이 JQ 플롯을위한 컨트롤러가 있습니다

app.controller('chartCtrl', ['$scope', 'Model1', 'Model2', function($scope, Model1, Model2) { 
    var model1 = new Model1(); 
    model1.firstAsyncMethod(function() { 
     var model2 = new Model2(); 
     model2.secondAsyncMethod(function() { 
     $scope.data = [ [1,6.5],[2,6.5],[3,7],[4,8],[5,7.5],[6,7],[7,6.8],[8,7],[9,7.2],[10,7],[11,6.8],[12,7] ]; 
     }) 
    }); 
}]); 

당신이 볼 수 있듯이, 내가 처음 firstAsyncMethod()와 패스를 전화 드렸습니다을 콜백. 이 콜백을 통해 다른 비동기 호출이 secondAsyncMethod()이됩니다. 이 secondAsyncMethod()이 해결되면 내 $scope.data이 끝나는 시점에만 있습니다. ui-options 시도가 페이지로드 data를로드 할 때

<div ng-controller="chartCtrl"> 
    <div ui-jq="plot" ui-options=" 
      [ 
      { data: {{data}}} 
      ] 
     "> 
    </div> 
</div> 

지금, 문제는, 컨트롤러가 아직 data 반환되지 않았습니다 한편

,이 컨트롤러에 대한 내 견해는 것 같습니다. angularJS에 구문 분석 오류가 발생합니다.

두 번째 비동기 메서드가 완전히 해결 된 후에 컨트롤러에서 차트 옵션을 정의하려고했지만 오류가 계속 발생합니다. 이 문제를 어떻게 해결할 수 있습니까? 감사.

Answer 1

좋아요를 마침내 간단한 해결책을 찾기 위해 관리 있도록.

<div ng-controller="chartCtrl"> 
<div ui-jq="plot" ui-refresh="data" ui-options=" 
     [ 
     { data: {{data}}} 
     ] 
    "> 
</div> 

를 컨트롤러에서 당신이 비동기 오류 던지는 중지 호출 이외의 몇 가지 기본 값으로 data을 정의 할 수 있습니다 :

을 당신이 할 필요가보기에 ui-refresh 지시문을 추가입니다

app.controller('chartCtrl', ['$scope', 'Model1', 'Model2', function($scope, Model1, Model2) { 
    $scope.data = [[0,0]]; 
     var model1 = new Model1(); 
     model1.firstAsyncMethod(function() { 
      var model2 = new Model2(); 
      model2.secondAsyncMethod(function() { 
      $scope.data = [ [1,6.5],[2,6.5],[3,7],[4,8],[5,7.5],[6,7],[7,6.8],[8,7],[9,7.2],[10,7],[11,6.8],[12,7] ]; 
      }) 
     }); 
    }]); 

Answer 2

resolve을 사용할 수 있습니다.로드 할 때 컨트롤러에서 데이터를 사용할 수 있습니다 (일반적으로 비동기 적으로 가져온 데이터). ngRoute과 ui-router에서 모두 사용할 수 있습니다.이 콜백을 $q을 사용하여 약속해야합니다.

는 chartCtrl에 대한 경로 정의에이 추가 :

resolve: { 
    modelData: function($q, Model1, Model2) { 
    //use $q to wrap asynchronous callbacks in promises 
    var deferred = $q.defer(); 
    var model1 = new Model1(); 
    model1.firstAsyncMethod(function() { 
     var model2 = new Model2(); 
     model2.secondAsyncMethod(function() { 
     var data = [ [1,6.5],[2,6.5],[3,7],[4,8],[5,7.5],[6,7],[7,6.8],[8,7],[9,7.2],[10,7],[11,6.8],[12,7] ]; 
     deferred.resolve(data); 
     }); 
    }); 
    return deferred.promise; 
    } 
} 

그런 다음 컨트롤러에 modelData를 삽입 할 수 있습니다

app.controller('chartCtrl', ['$scope', 'modelData', function($scope, modelData) { 
    $scope.data = modelData; 
}]);