Question

如果找不到src，我正在使用fallback url的angular指令作为名字首字母

指令

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

该指令正在更新fallback-src，但它不绑定src并更新它。似乎我无法使用新值绑定和更新它

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

Answer 2

我将指令更新为元素级别，然后进行了更改工作代码

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

在html中它可以用作

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

如何使用指令使用新的fallback-src更新src？

2 个答案: