如何使用指令使用新的 fallback-src 更新 src? [英] How to update the src with new fallback-src using the directive?

问题描述

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

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

指令

(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 并更新它.似乎我无法用新值绑定和更新它

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

在控制台中

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

推荐答案

不要使用 ng-src 指令，使用 jqLit​​e API 直接更改 src 属性:

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

这篇关于如何使用指令使用新的 fallback-src 更新 src?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！