3

Estoy trabajando en una directiva que necesita información para funcionar. Esta información debe provenir desde una promesa. El problema es que la directiva carga sin la información porque la promesa toma más tiempo en ejecutarse que la directiva en sí. A continuación mi código:

angular.module('app').directive('tagInput', tagInput);

var tagInput = function ($timeout, profileService) {

  var profileList = profileService.getProfileList();

  profileList.then(function (profiles) {
    var profileObject = {};
    var profilesFiltered = [];

    for(var index in profiles){
      if(profiles[index].hasOwnProperty('id')){
        var notStandard = profiles[index].id.match(/\d+/g);
        if (notStandard != null) {
          profileObject.icon = '<i class="fa fa-bookmark" aria-hidden="true"></i>';
        }
        else{
          profileObject.icon = '<i class="fa fa-user" aria-hidden="true"></i>';
        }
        profileObject.name = profiles[index].name;
        profileObject.identifier = profiles[index].id;
        profileObject.ticked = false;
        profilesFiltered.push(profileObject);
      }
    }

    return profilesFiltered;
  });

return {
  restrict: 'EA',
  require: 'ngModel',
  scope: {
    tags: '=ngModel',
    searchParams: '=searchParams'
  },
  replace: false,
  link: function ( scope, element, attrs ) {

    scope.modelFilter = {
      showSearchPanel: false,
      inputProfiles: profilesFiltered,
    }
    ...
}

De esta manera los datos en el template siempre aparecen nulos. ¿Cómo puedo preparar los datos antes de la ejecución del link en la directiva. Es posible que necesite algo muy similar para inputAccounts: accountsFiltered,.

1 respuesta 1

2

No deberías preocuparte por eso. Angular esta diseñado para que una vez que los datos lleguen estos actualicen la vista automáticamente. Si debes poner contenido puedes poner un loader o algo parecido.

Por definición una petición http, promesa o valor futuro es imposible saber cuando terminará o si terminará en lo absoluto por lo que no es buena idea retrasar la compilación de la directiva, sólo compila y actualiza los datos en el $scope cuando los tengas.

Mirando el código de tu directiva veo que intentas obtener los datos en el mismo momento en que la directiva está siendo declarada lo cual es un error pues las directivas tienes varias fases donde puedes/debes poner código de ejecución.

1 compile      => No tiene $scope. No podrás actualizar la vista
2 controller   => Tiene $scope. Ocurre primero que el pre y el post
3 pre-link     => Tiene $scope. Ocurre primero que el pre de las directivas hijas
4 post-link    => Tiene $scope. Ocurre después que el post de las directivas hijas

Estos se ejecutan en ese mismo orden. En tu caso ya tienes un post-link por lo que puedes utilizarlo para poner toda la lógica ahí.

Sería algo así

angular.module('app').directive('tagInput', tagInput);

var tagInput = function($timeout, profileService) {
  return {
    restrict: 'EA',
    require: 'ngModel',
    scope: {
      tags: '=ngModel',
      searchParams: '=searchParams'
    },
    replace: false,
    link: function(scope, element, attrs) {

      // Inicializas el objeto
      scope.modelFilter = {
        showSearchPanel: false,
        inputProfiles: []
      }

      profileService.getProfileList().then(function(profiles) {
        var profileObject = {};
        var profilesFiltered = [];

        for (var index in profiles) {
          if (profiles[index].hasOwnProperty('id')) {
            var notStandard = profiles[index].id.match(/\d+/g);
            if (notStandard != null) {
              profileObject.icon = '<i class="fa fa-bookmark" aria-hidden="true"></i>';
            } else {
              profileObject.icon = '<i class="fa fa-user" aria-hidden="true"></i>';
            }
            profileObject.name = profiles[index].name;
            profileObject.identifier = profiles[index].id;
            profileObject.ticked = false;
            profilesFiltered.push(profileObject);
          }
        }

        // Actualizas el objeto con los resultados obtenidos. 
        // La vista se actualizará automaticamente
        scope.modelFilter.inputProfiles = profilesFiltered;
      });
    }
  }
}

Si necesitas llamar nuevamente al código de la promesa lo encapsulas en una función para poderla reutilizar.

De esta forma no importa el momento en el que lleguen tus resultados ya que tu vista siempre estará actualizada.

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.