异步加载/处理承诺在AngularJS与JQ-情节意见

问题描述：

我有一个JQ-情节如下控制器：异步加载/处理承诺在AngularJS与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中引发解析错误。

我试图在第二个异步方法完全解决后在控制器中定义图表选项，但我仍然不断收到错误。我该如何解决这个问题？谢谢。

'model1'和'model2'从哪里来？ –

@NexusDuck他们是工厂。对不起，我忘了显示他们的构造函数。我已经添加并更新了问题。 – swdon

答

好了，我终于找到一个简单的解决方案。所有你需要做的就是添加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] ]; 
      }) 
     }); 
    }]);

答

您可以使用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; 
}]);

异步加载/处理承诺在AngularJS与JQ-情节意见

相关推荐