異步加載/處理承諾在AngularJS與JQ-情節意見

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變爲可用。

在此期間，我對這個控制器看法是這樣的：

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

現在的問題是，當ui-options嘗試在網頁加載加載data，控制器還沒有回來data呢。這會在angularJS中引發解析錯誤。

我試圖在第二個異步方法完全解決後在控制器中定義圖表選項，但我仍然不斷收到錯誤。我該如何解決這個問題？謝謝。

Answer 1

好了，我終於找到一個簡單的解決方案。所有你需要做的就是添加ui-refresh指令的觀點：

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

在控制器，你必須定義data一些默認值之外的異步叫停引發錯誤：

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