Значки Jdenticon не отображаются при использовании ng-repeat

Question

Я использовал библиотеку Jdenticon JavaScript ( https://jdenticon.com/) для своих пользовательских значков. Он должен взять хеш и отобразить его как SVG или Canvas, используя что-то вроде этого:

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

Таким образом, проблема в том, что я пытаюсь отобразить несколько пользовательских значков на одной странице, используя угловой ng-repeat и bind hash внутри data-jdenticon-hash. Похоже, что все данные находятся там, где и должны быть, но Jdenticon жалуется, что не видит связанные данные. Если я добавлю статический хеш, такой как "ff8adece0631821959f443c9d956fc39" внутри data-jdenticon-hash, он отобразит все значки одинаково, но правильно.

Вот мой текущий код:

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