Directive personnalisée pour le préchargement de l'image d'arrière-plan ne fonctionne pas AngularJS

Question

Je travaille sur une directive personnalisée pour précharger des images pendant que l'état (avec ui-router change) afin que les données et le contenu soient résolus avant de naviguer au nouvel état.

J'ai créé un stylo ici: https://codepen.io/wons88/pen/NgbNvO pour montrer ma mise en œuvre de base à la directive bgSrc:

app.directive('bgSrc', ['preloadService', function (preloadService) { 
    return function (scope, element, attrs) { 
     element.hide(); 

     preloadService(attrs.bgSrc).then(function() { 
      console.log(element.css); 
      element.css({ 
       "background-image": "url('" + attrs.bgSrc + "')" 
      }); 
      element.fadeIn(); 
     }); 
    } 
}]); 

et preloadService:

app.factory('preloadService', ['$q', '$rootScope', function ($q, $rootScope) { 
    return function (url) { 
     var deffered = $q.defer(), 
      image = new Image(); 

     image.src = url; 

     if (image.complete) { 
      $rootScope.loading = false; 
      deffered.resolve(); 

     } else { 
      $rootScope.loading = true; 
      image.addEventListener('load', 
       function() { 
        deffered.resolve(); 
        $rootScope.loading = false; 
       }); 

      image.addEventListener('error', 
       function() { 
        deffered.reject(); 
        $rootScope.loading = true; 
       }); 
     } 

     return deffered.promise; 
    }; 
}]); 

Et le code HTML:

<div bg-src="https://images5.alphacoders.com/446/thumb-1920-446028.jpg">Background img should show up...</div> 

EDIT: Le problème est que l'image ne peut être affiché même si elle est chargé (comme indiqué dans l'onglet réseau dans les outils de dev chrome). Si je le fais en appliquant statiquement le style (ou la classe) l'image ne montre aucun problème, charge juste plus lentement ... donc essayant d'appliquer la directive.

Je sais qu'il ya quelque chose de mal qui se passe dans la directive bgSrc mais je suis incapable de le localiser. Toute aide à ce sujet serait très apprécié :)

Answer 1

element.hide est pas une fonction

Vous appelez

element.hide(); 

dans votre fonction de lien, mais jQlite n'a pas une méthode hide(). Comme vous n'avez pas inclus jQuery dans votre Codepen, il échoue sur cette ligne.

https://docs.angularjs.org/api/ng/function/angular.element

Au lieu de cela, utilisez css

element.css('visibility', 'invisible'); 

Ou ajouter jQuery