Comment mettre à jour le src avec le nouveau fallback-src en utilisant la directive?

Question

J'utilise la directive angulaire pour l'URL de remplacement comme les initiales de nom si src ne se trouve pas

directive

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('imageFallbackInitials', imageFallbackInitials); 

    /* @ngInject */ 
    function imageFallbackInitials() { 

     return { 
      restrict : "A", 
      priority: 1000, 
      scope: { 
       imageFallbackInitials: '@' 
      }, 
      controller: function($scope) { 
       // bind myVar property to scope 
       $scope.getInitials = function(name) { 

        var nameArray = name.split(" "); 

        if(nameArray.length > 1){ 
         name = { 
          first : nameArray[0], 
          last : nameArray[1] 
         }; 
        } else { 
         name = { 
          first : nameArray[0].charAt(0), 
          last : nameArray[0].charAt(1) 
         }; 
        } 

        var canvas = document.createElement('canvas'); 
        canvas.style.display = 'none'; 
        canvas.width = '45'; 
        canvas.height = '45'; 
        document.body.appendChild(canvas); 
        var context = canvas.getContext('2d'); 
        context.fillStyle = "dodgerblue"; 
        context.fillRect(0, 0, canvas.width, canvas.height); 
        context.font = "20px Roboto, 'Helvetica Neue, sans-serif"; 
        context.fillStyle = "#fff"; 
        var first, last; 
        if (name && name.first && name.first != '') { 
         first = name.first[0]; 
         last = name.last && name.last != '' ? name.last[0] : null; 
         if (last) { 
          var initials = first + last; 
          context.fillText(initials.toUpperCase(), 10, 30); 
         } else { 
          var initials = first; 
          context.fillText(initials.toUpperCase(), 20, 33); 
         } 
         var data = canvas.toDataURL(); 
         document.body.removeChild(canvas); 
         return data; 
        } else { 
         return false; 
        } 
       }; 
      }, 
      link : function(scope,elements,attrs){ 
       attrs.$set('fallback-src', scope.getInitials(attrs.imageFallbackInitials)); 
       attrs.$set('ng-src', scope.getInitials(attrs.imageFallbackInitials)); 
      } 
     } 
    } 
})(); 

La directive est mise à jour Toutefois fallback-src son ne lie pas le src et sa mise à jour . Il semble que je suis incapable de se lier et mettre à jour avec la nouvelle valeur

Html

dans la console

<img class="md-avatar ng-isolate-scope" 
    mtp-image-fallback-initials="This User" 
    ng-src="/assets/images/other/random.jpg" 
    fallback-src="data:image/png;base64,iVBORw0KGg5ErkJggg==" 
    src="/assets/images/other/random.jpg"> 

Answer 1

Ne pas utiliser la directive ng-src, utilisez the jqLite API changer le src directement de l'attribut:

link : function(scope,elements,attrs){ 
    attrs.$set('fallback-src', scope.getInitials(attrs.imageFallbackInitials)); 
    //attrs.$set('ng-src', scope.getInitials(attrs.imageFallbackInitials)); 

    elements.attr('src', scope.getInitials(attrs.imageFallbackInitials)); 
} 

Answer 2

I mis à jour la directive au niveau de l'élément, puis modifié Code de travail

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('imageFallbackInitials', imageFallbackInitials); 

    /* @ngInject */ 
    function imageFallbackInitials() { 

     return { 
      restrict : "EA", 
      priority: 1000, 
      scope: { 
       imageFallbackInitials: '@', 
       ngFallback : '@', 
       src : '@' 
      }, 
      controller: function($scope) { 

       function getRandomColor() { 
        var letters = 'ABCDEF'; 
        var color = '#'; 
        for (var i = 0; i < 6; i++) { 
         color += letters[Math.floor(Math.random() * 16)]; 
        } 
        return color; 
       } 

       // bind myVar property to scope 
       $scope.getInitials = function(name) { 

        var nameArray = name.split(" "); 

        if(nameArray.length > 1){ 
         name = { 
          first : nameArray[0], 
          last : nameArray[1] 
         }; 
        } else { 
         name = { 
          first : nameArray[0].charAt(0), 
          last : nameArray[0].charAt(1) 
         }; 
        } 

        var canvas = document.createElement('canvas'); 
        canvas.style.display = 'none'; 
        canvas.width = '45'; 
        canvas.height = '45'; 
        document.body.appendChild(canvas); 
        var context = canvas.getContext('2d'); 
        context.fillStyle = getRandomColor(); 
        context.fillRect(0, 0, canvas.width, canvas.height); 
        context.font = "20px Roboto, 'Helvetica Neue, sans-serif"; 
        context.fillStyle = "#fff"; 

        var first, last; 
        if (name && name.first && name.first != '') { 
         first = name.first[0]; 
         last = name.last && name.last != '' ? name.last[0] : null; 
         if (last) { 
          var initials = first + last; 
          context.fillText(initials.toUpperCase(), 10, 30); 
         } else { 
          var initials = first; 
          context.fillText(initials.toUpperCase(), 20, 33); 
         } 
         var data = canvas.toDataURL(); 
         document.body.removeChild(canvas); 
         return data; 
        } else { 
         return false; 
        } 
       }; 
      }, 

      template: '<img class="md-avatar" fallback-src="{{fallbackSrc}}" src="{{ngSrc}}" />', 
      replace: true, 

      link : function(scope,elements,attrs){ 
       scope.fallbackSrc = scope.getInitials(attrs.ngFallback); 
       scope.ngSrc = scope.getInitials(attrs.ngSrc); 
      } 
     } 
    } 
})(); 

en html, il peut être utilisé comme

<image-fallback-initials ng-fallback="Your Name" 
     ng-src="/assets/images/other/random.jpg"> 
</image-fallback-initials>