0
我使用后备网址姓名首字母的角度指令如果没有找到SRC如何用新的fallback-src使用指令更新src?
指令
(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其不具约束力的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">
@atjoshi您还需要删除img标签中的初始ng-src。如果不是,它将在您的指令后呈现并更改src属性值。 –
谢谢,既然已经使用了元素指令而不是属性,如果我的答案中有任何必须注意的地方,请提出:) – atjoshi