非同期ロード/ Iは、以下のようにJQ-プロットするためのコントローラを持っているJQ-プロット

Question

でAngularJSビューの約束を扱う：

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の解析エラーがスローされます。

2番目の非同期メソッドが完全に解決された後、コントローラでチャートオプションを定義しようとしましたが、まだエラーが発生しています。どうすれば解決できますか？ありがとう。

Answer 1

わかりましたので、私は最終的には簡単な解決策を見つけることができました。あなたがやらなければならないことは、ビューにui-refreshディレクティブを追加です：

あなたがエラーを投げて止めるために呼び出す非同期の外にいくつかのデフォルト値に dataを定義する必要がコントローラで

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

：

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