AngularJS directive ne fonctionne pas avec du contenu dynamique

Question

Bonjour je créer une directive angulaire pour ajouter un bakcground et rendre la largeur égale à la hauteur (1: 1) div carré

app.directive('backImg', function($timeout){ 
return function(scope, element, attrs){ 
    $timeout(function(){ 
      var url = attrs.backImg; 
      console.log(attrs); 
      console.log("after printing attrs"); 
      if (url == null || url == ""){ 
        url="/web/header.png"; 
      } 
      element.css({ 
        'height' : element[0].offsetWidth, 
        'margin-bottom' : '20px', 
        'background-image': 'url(' + url +')', 
        'background-size' : 'cover', 
        'background-repeat': 'no-repeat', 
        'background-position': 'center center', 
      }); 
    }); 
    }; 
}); 

Cette directive fonctionne bien avec les éléments qui apparaît lorsque la page est chargée première fois

.... CERTAINS HTML

<div back-img="{{group.images[0].path}}"> </div> ---> Working fine 

.... PLUS DE HTML

Cette heure ne fonctionne pas, la seule différence est qu'elle a été montrée si sessionSelected est vrai.

<div class="row" id="active-session" ng-show="userCtrl.sessionSelected"> 
    <div back-img="{{group.images[0].path}}"> </div> ---> Not working Working 
</div> 

Pouvez-vous s'il vous plaît me aider ceci, s'il vous plaît

EDIT Je ressemble à la directive est été appelé alors qu'il n'est pas montré (ng-show) et pour cette raison group.images [0] .path est null.

comment puis-je faire pour appeler la directive lorsqu'elle est visible? Je pense que ce sera la façon

Ici vous pouvez voir que l'élément est été avec le chemin img correct lors de l'affichage

FIREFOX DEBUG

<div back-img="/web/uploads/56f7f53a2b82bbf75033559a/nKj0DMZrVt.jpeg"></div> 

Answer 1

vous créé le <div back-img="{{group.images[0].path}}"> et utilisez le element[0].offsetWidth lorsque l'élément est sur display:none css (en raison de l'attribut ng-show=true). Donc, pour que cela fonctionne, vous devez changer le ng-show en ng-if. de cette façon lorsque vous modifiez le drapeau vrai, il tire le code html tout recommencer et cela va appeler à la fonction link dans le directive

EDIT

vous pouvez toujours utiliser la fonction $watch qui vérifient la mise à jour dans l'url et quand il se produit déclenche les changements

app.directive('backImg', function($timeout){ 
    return function(scope, element, attrs){ 
    scope.$watch(attrs.backImg,function(){ 
      var url = attrs.backImg; 
      console.log(attrs); 
      console.log("after printing attrs"); 
      if (url == null || url == ""){ 
        url="/web/header.png"; 
      } 
      element.css({ 
        'height' : element[0].offsetWidth, 
        'margin-bottom' : '20px', 
        'background-image': 'url(' + url +')', 
        'background-size' : 'cover', 
        'background-repeat': 'no-repeat', 
        'background-position': 'center center', 
      }) 
     }) 
    }; 
});