AngularJS 1.6: Directive à l'intérieur du modèle de directive ne fonctionne que la première fois

Question

J'ai une directive "avatar", qui prend un objet 'utilisateur' et affiche une image de l'utilisateur.

Cela fonctionne très bien.

Maintenant j'ai une autre directive 'user', qui affiche le nom de l'objet 'user' donné et inclut avec son template la directive.

Cela fonctionne .. LA PREMIÈRE FOIS.

Lorsque je mets à jour l'objet 'user', seul le nom change, l'image (avatar) ne change pas.

Mon problème: Comment puis-je le faire fonctionner?

directive Avatar:

(fonction de lien: si l'objet utilisateur a une propriété 'ext', il calcule un chemin d'image ('src'), sinon il affiche un template.jpeg standard)

directive('avatarSmall', function() { 

    return { 
    restrict: "E", 
    replace: true, 
    templateUrl: "scripts/directives/avatar/small.html", 
    link: function(scope, element, attrs) { 
     var r = "images/avatars/"; 
     var ext = scope.user.ext; 
     r += ext != undefined && ext.length >= 3 ? scope.user.ID + "." + ext : "template.jpeg"; 
     scope.src = r; 
    }, 
    scope: { 
     user: '=' 
    } 
    } 
}) 

modèle avatar:

<div class="circle-wrapper-small"> 
    <img class="circle-img-small" 
     ng-src="{{src}}"> 
</div> 

directive utilisateur:

directive('user', function($compile) { 
    return { 
    restrict: "E", 
    replace: true, 
    templateUrl: "scripts/directives/user/template.html", 
    scope: { 
     user: '=' 
    } 
    } 
}) 

modèle utilisateur:

<div> 
    <div class="media-left"> 
    <avatar-small user="user" /> 
    </div> 
    <div class="media-body"> 
    <h4 class="media-heading">{{user.name}} {{user.surname}}</h4> 
    </h5> 
    </div> 
</div> 

Answer 1

Parce que le code de votre directive avatar exécute seuls, sur init directive. Si vous souhaitez mettre à jour les modifications, vous devez $broadcast événement dans votre directive et exécuter ce code sur l'événement $broadcast.

Pour plus d'informations sur $emit, événement $broadcast et $on vous pouvez regarder à travers ce post: Usage of $broadcast(), $emit() And $on() in AngularJS

Quelque chose comme ceci:

contrôleur parent

$scope.user = { 
    // object properties 
} 

// watch "$scope.user" for changes 
$scope.$watch('user', function(newVal, oldVal){ 
    if(newVal !== oldVal) { 
     // send new "$scope.user" to your directive 
     $scope.$broadcast('userObjChanged', $scope.user); 
    } 
}, true); 

Et dans votre directive

// catch event from parent's controller with new user object 
$scope.$on('userObjChanged', function(event, data) { 
    console.log(data); // here is the new user object from parent's scope 
})