angularjs - ejemplos - directive controller angular

Espere a que haya datos en el controlador antes de ejecutar la función de enlace en la directiva AngularJS

Question

¿Cómo puedo garantizar que los datos de un controlador se hayan cargado en una directiva antes de ejecutar la función de enlace?

Usando el código psuedo, podría haber:

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

para mi html

En mi directiva, podría tener algo como esto:

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

    }

}


}]);

Lo anterior no funcionará porque console.log ($ scope.paths.s longitud); se llamará antes de que el servicio haya devuelto cualquier información.

Sé que puedo llamar al servicio desde la función de enlace, pero me gustaría saber si hay una manera de "esperar" la llamada de servicio antes de activar la función de enlace.

Answer 1

La solución más fácil sería usar ng-if dado que el elemento y la directiva se representarían solo cuando el ng-if se resuelva como verdadero

<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 usa promesas

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