Angular指令链接功能只能在页面加载/重载时运行

Question

我想实现一个切换图像[有3个图像src]，如果列表中的用户有一个过滤器设置，问题是图像src不会改变当我通过ajax重新加载候选对象时，因为指令中的链接函数仅在实际页面重新加载时触发。

我想element.attr（ 'SRC' ...运行每次使用该指令的时间，并设置基于doneCondition正确的图像源属性

<div data-ng-repate="candidate in candidates"> 
    <img-toggle 
     class="like_img" 
     doing='{{animation_img_src}}' 
     done='{{{done_img_src}}' 
     undo='{{{undo_img_src}}' 
     data-ng-click="ajaxButton($event, 'likeUser', {user_id: candidate.user_id})" // register filter on server 
     done-condition="{{candidate.filters.indexOf('liked') > -1}}"> // e.g. candidate.filters = 'liked|accessed|...' 
    </img-toggle> 
</div> 

指令JS

app.directive('imgToggle', function() { 
    return { 
     scope: { 
      class: '@', 
      done: '@', 
      doing: '@', 
      undo: '@', 
      alt: '@', 
      doneCondition: '@' 
     }, 
     replace: true, 
     restrict: 'E', 
     template: '<img class="{{class}}" data-undo-src="{{undo}}" data-doing-src="{{doing}}" data-done-src="{{done}}" title="{{alt}}" alt="{{alt}}" />', 
     link: function(scope, element, atts) { 
     // Issue: link function runs once so if I reload the list via an ajax button and doneCondition changes the src is not being set updated 
      element.attr('src', scope.doneCondition === 'true' ? scope.done : scope.undo); 
     } 
    }; 
}); 

Answer 1

在模板中使用ng-src并绑定到一些$scope.getSrc()函数。在该函数内部运行逻辑以确定实际显示哪个源：

template: '<img ng-src="{{getSrc()}}"/>' 
link: function(scope){ 

    scope.getSrc = function(){ 
    // your logic, for example: 
    return scope.doneCondition === 'true' ? scope.done : scope.undo; 
    } 
}