Подождите, пока данные в контроллере будут запущены в функции AngularJS.

Как я могу гарантировать, что данные из контроллера были загружены в директиве до запуска функции ссылки?

Используя psuedo-код, я мог бы:

<my-map id="map-canvas" class="map-canvas"></my-map>

для моего html.

В моей директиве я мог бы что-то вроде этого:

app.directive('myMap', [function() {



return{
    restrict: 'AE',
    template: '<div></div>',
    replace: true,
    controller: function ($scope, PathService) {

        $scope.paths = [];

        PathService.getPaths().then(function(data){
            $scope.paths = data;

        });

    },
    link: function(scope, element, attrs){
        console.log($scope.paths.length);

    }

}


}]);

Вышеуказанное не будет работать, потому что console.log($ scope.paths.length); будет вызван до того, как служба вернет любые данные.

Я знаю, что могу вызвать службу из функции ссылок, но хотел бы знать, есть ли способ "дождаться" вызова службы перед запуском функции ссылки.

Ответы

Ответ 1

Самое простое решение - использовать ng-if, поскольку элемент и директива будут отображаться только тогда, когда ng-if будет разрешен как истинный

<my-map id="map-canvas" class="map-canvas" ng-if="dataHasLoaded"></my-map>

app.controller('MyCtrl', function($scope, service){
  $scope.dataHasLoaded = false;

  service.loadData().then(
    function (data) {
      //doSomethingAmazing
      $scope.dataHasLoaded = true
    }
  )
})

или используйте promises

return {
  restrict: 'AE',
  template: '<div></div>',
  replace: true,
  controller: function ($scope, PathService) {
    $scope.paths = [];
    $scope.servicePromise = PathService.getPaths()
  },
  link: function (scope, element, attrs) {
    scope.servicePromise.then(function (data) {
      scope.paths = data;
      console.log(scope.paths)
    });
  }
}