How to update the src with new fallback-src using the directive?

问题

I am using the angular directive for fallback url as name initials if src is not found

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));
            }
        }
    }
})();

The directive is updating the fallback-src however its not binding the src and updating it. Seems I am unable to bind and update it with new value

Html

in 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">

回答1:

Don't use the ng-src directive, use the jqLite API to change the src attribute directly:

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));
}   

回答2:

I updated the directive to element level and then made changes Working code

(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 = '0123456789ABCDEF';
                    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);
            }
        }
    }
})();

in html it can be used as

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

来源：https://stackoverflow.com/questions/44636546/how-to-update-the-src-with-new-fallback-src-using-the-directive