我正在尝试在有角度的JS,离子应用程序中生成姓名徽章/文本头像。
.controller("myCtrl",function($scope, userService){
userService.getUsers().then(function(users){
$scope.users = users.data;
$(function(){
$('.name').nameBadge({
// boder options
border: {
color: '#ddd',
width: 3
},
// an array of background colors.
colors: ['#a3a948', '#edb92e', '#f85931', '#ce1836', '#009989'],
// text color
text: '#fff',
// avatar size
size: 48,
// avatar margin
margin: 5,
// disable middle name
middlename: true,
// force uppercase
uppercase: false
});
});
});
})
我的观点是这样的:
<ion-item class="item-avatar " collection-repeat="item in users">
<div class="name">{{item.username}}</div>
</ion-item>
问题是,它显示iu是项目和用户名的首字母,而不是返回提取真实用户名的首字母。
Jquery 名称徽章插件是:
(function ($) {
$.fn.nameBadge = function (options) {
var settings = $.extend({
border: {
color: '#ddd',
width: 3
},
colors: ['#a3a948', '#edb92e', '#f85931', '#ce1836', '#009989'],
text: '#fff',
size: 72,
margin: 5,
middlename: true,
uppercase: false
}, options);
return this.each(function () {
var elementText = $(this).text();
var initialLetters = elementText.match(settings.middlename ? /b(w)/g : /^w|bw(?=S+$)/g);
var initials = initialLetters.join('');
$(this).text(initials);
$(this).css({
'color': settings.text,
'background-color': settings.colors[Math.floor(Math.random() * settings.colors.length)],
'border': settings.border.width + 'px solid ' + settings.border.color,
'display': 'inline-block',
'font-family': 'Arial, 'Helvetica Neue', Helvetica, sans-serif',
'font-size': settings.size * 0.4,
'border-radius': settings.size + 'px',
'width': settings.size + 'px',
'height': settings.size + 'px',
'line-height': settings.size + 'px',
'margin': settings.margin + 'px',
'text-align': 'center',
'text-transform' : settings.uppercase ? 'uppercase' : ''
});
});
};
}(jQuery));
任何帮助将不胜感激。谢谢
试试这个:将你的插件代码移动到 和 angular 指令中(查看这里了解如何 https://docs.angularjs.org/guide/directive)。
然后使用这个角度依赖关系(https://docs.angularjs.org/api/ng/service/$interpolate ),$interpolate,来获取div内部的值。 在插件的这一行使用它:var elementText = $(this).text();
不要忘记在指令中注入$interpolate。