Асинхронная загрузка взглядов/обработки обещаний 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 еще. Это порождает ошибки разбора в угловом JS.

Я попытался определить параметры диаграммы в контроллере после того, как второй метод асинхронизации полностью разрешен, но я все равно продолжаю получать ошибки. Как я могу это решить? Благодарю.

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