ng-repeatを使用しているときにJdenticonアイコンがレンダリングされない

Question

私のユーザーアイコンにはJdenticon JavaScriptライブラリ（https://jdenticon.com/）が使用されています。だから、問題は、私は角度を使用して、1つのページで複数のユーザーのアイコンをレンダリングしようとしているということです

<svg width="200" height="200" data-jdenticon-hash="ff8adece0631821959f443c9d956fc39"> 
 
    Fallback text for browsers not supporting inline svg 
 
</svg>

ng-：それはハッシュを取ると、このようなものを使用してSVGやキャンバスのいずれかとし、それをレンダリングする必要がありますdata-jdenticon-hash内のハッシュを繰り返してバインドします。すべてのデータは正しいはずですが、Jdenticonはバインドされたデータが表示されないと不平を言っています。私がdata-jdenticon-hashの中に "ff8adece0631821959f443c9d956fc39"のような静的なハッシュを追加すると、すべてのアイコンは同じだが正しく表示されます。任意の助けをいただければ幸いです

<div ng-repeat="i in friends" last-element-directive> 
 
<div id="requests" class="col col-md-12 col-sm-12 col-xs-12 tab-pane fade in active" ng-show="user_friends"> 
 
     <div id="icon" class="col-md-12"> 
 
     <div class="col-md-1 col-sm-1 col-xs-4"> 
 
      <svg width="40" height="40" data-jdenticon-hash="{{i.avatar}}"></svg> 
 
     </div> 
 
     <div class="col-md-3 col-sm-2 col-xs-3"> 
 
      <h3><a href="/user/?id={{i.username}}" target="_blank">{{i.username}}</a></h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

：

は、ここに私の現在のコードです！

Answer 1

私はjdentionの専門家ではありませんが、私のプロジェクトに実装している間にこれを突き詰めました。たぶんそれはあなたを助けます：

問題は、jdenticon.updateは、Angularのように動的に作成されたキャンバスでは呼び出されません。キャンバス要素の作成時にjdenticon.updateを呼び出す責任を負うディレクティブを作成する方法があります。例えば、このフィドルを参照してください ： https://jsfiddle.net/w5h6msvd/

ソースはこのgithubの問題です：https://github.com/dmester/jdenticon/issues/10

編集：これは私が

import identiconImpl from 'jdenticon'; 

export default() => ({ 
    restrict: 'A', 
    link: (scope, elem) => { 
     identiconImpl.update(elem[0], scope.hashValue); 
    }, 
    scope: { 
     hashValue: '<' 
    } 
}); 

私のプロジェクトで、今それを使用する方法ですこれがテンプレートです：

<svg identicon hash-value="ctrl.hashAndSaltOperatorName()"></svg> 

ああ、ここでindex.jsは、すべての必要な部分を持っている：

export default angular 
    .module('jdenticonHash', []) 
    .directive('identicon', identiconDirective);