5

Me podrían ayudar en dar un ejemplo o documentación de como renderizar primero todo el controller antes que se ejecute una directiva customizada.

Lo que tengo en el controller es un valor: $scope.total = 200;

En el HTML tengo lo siguiente

<div val-Custom><ul><li data-value="{{total}}"></li></ul></div>

Ahora quiero atrapar ese valor en mi directiva ejem:

ctrlsaldosyconsumos.directive('valCustom', function() {
return function(scope, element, attrs) {
    //aqui hago otras cosas me interesa mas 
    attrs.$observe('valCustom', function() {
         element.find('li').animate({ width: element.attr("data-value") + '%' }, 350);
    });
}
})

Ahora ese data-value en la directiva me sale undefined y si lo pongo, por ejemplo

<li data-value="200"></li> 

Esto sí se ejecuta correctamente. Pienso que primero se está ejecutando la directiva sin haber cargado el valor del controlador ($scope.total).

Alguna sugerencia o ayuda les agradeceré, estoy iniciando en esto de AngularJS (Angular 1) y más en directivas. Gracias .

1
  • El ajax lo ejecutas en el mismo controlador?
    – sioesi
    Commented el 11 jun. 2017 a las 0:19

3 respuestas 3

2

Respuesta corta:

Siempre se ejecuta primero el controller antes que la directiva

Respuesta larga:

Primero que nada recuerda que ng-controller es una directiva también. El orden de ejecución de las directivas es el siguiente

compile padre
compile hijo
controller padre  =>  ng-controller
pre-link padre
controller hijo   =>  tu directiva
pre-link hijo
post-link hijo
post-link padre

Lo puedes comprobar en el siguiente snippet

angular.module('app', [])
  .directive('padre', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile padre');
        return {
          pre: function() {
            console.log('Pre padre');
          },
          post: function() {
            console.log('Post padre');
          }
        };
      },
      controller: function() {
        console.log('Controller padre');
      }
    };
  })
  .directive('hijo', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile hijo');
        return {
          pre: function() {
            console.log('Pre hijo');
          },
          post: function() {
            console.log('Post hijo');
          }
        };
      },
      controller: function() {
        console.log('Controller hijo');
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <padre>
    <hijo></hijo>
  </padre>
</div>

Lo que significa que si tu directiva está en el DOM dentro de tu controller nunca se ejecutará primero que este.

Si tu código depende de llamadas Ajax, da igual en el orden que lo ejecutes, es probable que tu directiva llegue a la fase post-link y aún no hayan llegado los resultados vía ajax.

La solución podría ser usar ng-if para señalizar cuando se puede renderizar la directiva.

angular.module('app', [])
  .controller('UtilCtrl', function($scope, $timeout) {
    $scope.muestraHijo = false;
    $timeout(function() {
      $scope.muestraHijo = true;
    }, 1000)
  })
  .directive('padre', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile padre');
        return {
          pre: function() {
            console.log('Pre padre');
          },
          post: function() {
            console.log('Post padre');
          }
        };
      },
      controller: function() {
        console.log('Controller padre');
      }
    };
  })
  .directive('hijo', function() {
    return {
      restrict: 'E',
      compile: function() {
        console.log('Compile hijo');
        return {
          pre: function() {
            console.log('Pre hijo');
          },
          post: function() {
            console.log('Post hijo');
          }
        };
      },
      controller: function() {
        console.log('Controller hijo');
      }
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="UtilCtrl">
  <padre>
    <div ng-if="muestraHijo">
      <hijo></hijo>
    </div>
  </padre>
</div>

Lee https://github.com/angular/angular.js/wiki/Understanding-Directives

Si necesitas esperar a que los datos del $scope hayan terminado de cargar intenta usando ng-if para retrasar el procesado de un bloque de DOM.

0

Problema semejante, lo solucioné considerando $watch dentro del controlador de mi directiva, en este caso era un atributo de tipo colección:

$scope.$watchCollection("datos", function (newValue, oldValue) {            
    if (newValue === oldValue) {
        return;
    }
    if ($scope.datos != undefined)
        loadGraphEChart($scope.labels, $scope.datos, $scope.titulo, $scope.idgraph);
});

con lo anterior, logré que la loadGraphEChart se ejecutara una vez que

$scope.datos != undefined

NOTA: el valor de datos no se asignaba dado algún evento del usuario, sino que se alimentaba como un atributo de la directiva dada la respuesta a una solicitud http

<div echart-graph ng-model="edades"
                                                     idgraph="Edades"
                                                     stilo="height:350px;width:98%;"
                                                     titulo="Edades"
                                                     labels="edades.labels"
                                                     datos="edades.datos"></div>
0

Quizás esto te pueda orientar, yo lo soluciones de esta manera:

<div val-Custom algo="$scope.algo">
    <ul>
        <li data-value="{{total}}"></li>
    </ul>
</div>

En tu directiva indicale lo siguiente:

ctrlsaldosyconsumos.directive('valCustom', function() {
    return {
      restrict: 'A',
      scope: {
        algo: '=algo'
      },
      link: function(scope, elem, attr){
        console.log("llamando al scope.algo deberias tener disponible tus datos")
        attrs.$observe('valCustom', function() {
            element.find('li').animate({ width: element.attr("data-value") + '%' }, 350);
        });
      }
    }
})

Esto te podria ayudar a comprender el funcionamiento:

Documentario AngularJS (Angular 1)

Navega al partado que dice: Isolating the Scope of a Directive

Saludos, espero ayudarte o guiarte.

1
  • Lo que pasa es que el valor $scope.total lo obtengo de una llamada ajax por lo que cuando renderiza el DOM al parecer lo ejecuta tan rapido que no carga los datos del controller. no se que puedo hacer ? Commented el 5 oct. 2016 a las 0:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.