角型JSでJquery Nameバッジ/テキストアバタープラグインを使用するには

Question

角型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

これを試してください：あなたのプラグインコードをangleディレクティブに移動してください（その方法はこちらを参照ください）https://docs.angularjs.org/guide/directive）。

次に、この角依存性（https://docs.angularjs.org/api/ng/service/ $ interpolate）を使用して、$ interpolateを使用してdiv内の値を取得します。 var elementText = $(this).text();

あなたの指示の中に$ interpolateを挿入することを忘れないでください。