如何使用带有角度 JS 的 Jquery 名称徽章/文本头像插件

How do I use the Jquery Name Badge /text avatar plugin with angular JS

本文关键字:徽章 文本 插件 Jquery 何使用 JS      更新时间:2023-09-26

我正在尝试在有角度的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|'b'w(?='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。