Czekaj na dane w kontrolerze przed uruchomieniem funkcji łączenia w dyrektywie AngularJS

Question

Jak mogę zapewnić, że dane z kontrolera zostały wczytane do dyrektywy przed uruchomieniem funkcji łączenia?

Korzystanie psuedo kod, mogę mieć:

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

dla mojego html.

W moim dyrektywy może mam coś takiego:

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

    } 

} 


}]); 

Powyższe nie będzie działać, ponieważ console.log ($ scope.paths.length); zostanie wywołany, zanim usługa zwróci jakiekolwiek dane.

wiem, że mogę zadzwonić do serwisu z funkcji łącza, ale chciałby wiedzieć, czy istnieje sposób, aby „czekać” na wezwanie serwisu przed wypalaniem funkcję łącza.

Answer 1

Najprostszym rozwiązaniem byłoby użycie ng-if od elementu i dyrektywa byłaby pozbawiona tylko wtedy, gdy ng-if uchwala się, co prawdziwy

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

lub użytkowania obiecuje

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