使用 jq-plot 在 AngularJS 视图中异步加载 views/handling 承诺

Question

我有一个用于 jq-plot 的控制器，如下所示：

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

您可以使用 resolve, this will make (usually asynchronously fetched) data available in your controller when it loads. It's available both in ngRoute and ui-router, you'll also have to wrap these callbacks in a promise using $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;
}]);

Answer 2

好吧，我终于设法找到了一个更简单的解决方案。您需要做的就是向视图添加 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] ];
          })
       });
    }]);

使用 jq-plot 在 AngularJS 视图中异步加载 views/handling 承诺

Asynchronous loading of views/handling promises in AngularJS views with jq-plot

angularjs

asynchronous

jqplot