Attendere i dati nel controller prima che la funzione di collegamento venga eseguita nella direttiva AngularJS

Question

Come è possibile garantire che i dati da un controller siano stati caricati in una direttiva prima dell'esecuzione della funzione di collegamento?

Utilizzando pseudo-codice, avrei potuto avere:

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

per il mio html.

Nella mia direttiva potrei avere qualcosa di simile:

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

    } 

} 


}]); 

È possibile che questo non funzionerà perché console.log ($ scope.paths.length); verrà chiamato prima che il servizio abbia restituito tutti i dati.

So che posso chiamare il servizio dalla funzione di collegamento ma vorrei sapere se c'è un modo per "attendere" per la chiamata di servizio prima di attivare la funzione di collegamento.

Answer 1

La soluzione più semplice sarebbe quella di utilizzare ng-if poiché l'elemento e la direttiva sarebbe reso solo quando il ng-if viene risolto come vero

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

o l'uso promette

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