Функция угловой директивной ссылки работает только на странице load/reload

Question

Я пытаюсь реализовать изображение с переключением [имеет 3 изображения src] на основе, если пользователь в списке имеет набор фильтров, проблема заключается в том, что изображение src не изменится когда я перезагрузил объект-кандидат через ajax, потому что функция ссылки в директиве является только триггером при фактической перезагрузке страницы.

Я хочу element.attr ('ЦСИ' ... чтобы бежать каждый раз, когда используется директива и установить правильный источник изображения на основе 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; 
    } 
}