如何将 Jquery Name Badge / text avatar 插件与 Angular JS 一起使用

Question

我正在尝试在 Angular 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 namebadge 插件是：

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

任何帮助将不胜感激。谢谢

Answer 1

试试这个：将你的插件代码移动到 angular 指令中（在此处查看如何做到这一点https://docs.angularjs.org/guide/directive）。

然后使用这个角度依赖（https://docs.angularjs.org/api/ng/service/$interpolate）$interpolate 来获取 div 内的值。在插件的这一行使用它：var elementText = $(this).text();

不要忘记在你的指令中注入 $interpolate。