javascript - 如何使用指令用新的后备 src 更新 src？

Question

如果未找到 src，我将使用 Angular 指令作为后备 url 作为名称首字母

指令

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

该指令正在更新后备 src，但它不会绑定(bind) src 并更新它。似乎我无法绑定(bind)并用新值更新它

HTML

<强>

在控制台

<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

不要使用ng-src指令，使用the jqLite API直接更改 src 属性:

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