AngularJS : html5 Video / Object & src / data change

Voici un petit soucis actuel d'AngularJs qui pourrait vous poser problème. J'ai du m'y confronter hier soir. J'en profite donc pour vous partager la solution temporaire du moment, proposée par Pete Bacon Darwin (rien que ça ;) !).

Au sein d'HTML5, les éléments video et object ne réagissent pas au changement dynamique de src et data. Apparement, ce ne serait pas dans les Specs HTML5.

En d'autres thermes, si d'une DB Mongo,vous souhaitez récupérer un url video/object depuis votre controller AngularJS afin de l'afficher dans votre View, ce n'est pas possible. En bref, si votre URL n'est pas en dur dans la partie HTML il vous faudra utiliser l'astuce ci-dessous.

Ce n'est pas un Bug AngularJS, mais nous pouvons tout de même espérer qu'à l'avenir, Angular nous propose un solution plus propre que ce qui est présenté ici, une simple directive.

Pour les vidéos

.directive('video', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$on('$destroy', function() {
        element.prop('src', '');
      });
    }
  };
})

Pour les objets

.directive('object', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      scope.$on('$destroy', function() {
        element.prop('data', '');
      });
    }
  };
})

PI : Le post github évoquant le sujet pour plus de détail.

Nous ajouterons sous peu une colorations aux snippets affichés sur ce blog, ou un lien vers nos snippets Gitlab.