Jdenticon icons not rendering when using ng-repeat

Question

I'v been using Jdenticon JavaScript library (https://jdenticon.com/) for my user icons. It should take hash and render it as either SVG or Canvas using something like this:

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

So the problem is that I am trying to render multiple user icons on single page using angular ng-repeat and bind hash inside data-jdenticon-hash. It appears that all data is right where it should be, but Jdenticon is complaining that it doesnt see the binded data. If I add static hash, like "ff8adece0631821959f443c9d956fc39" inside data-jdenticon-hash, it renders all icons the same, but correctly.

Here is my current code:

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

Any help would be appreciated!

Ursin Brunner · Accepted Answer · 2017-03-23T12:37:34.127

1

I'm not an expert with jdention but just stumbled over this while implementing it for my project. Maybe it helps you:

The problem is that jdenticon.update is never called for canvases created dynamically as by Angular. A solution could be to create a directive that is responsible for calling jdenticon.update when the canvas element is constructed. See this fiddle for an example: https://jsfiddle.net/w5h6msvd/

source is this github issue: https://github.com/dmester/jdenticon/issues/10

Edit: this is how I use it now in my project

import identiconImpl from 'jdenticon';

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

And this is the template:

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

Oh and here the index.js to have all the necessary parts:

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

edited Mar 23 '17 at 12:37

answered Mar 20 '17 at 14:47

Ursin Brunner

2,310
1
24
24

For got to update the question as I ended with workaround for this. As you mentioned, I created a directive to launch the jdenticon.update once the canvas is rendered. Unfortunately, this didnt work, but adding a small timeout after canvas construction did the trick. – mr_meeseeks Mar 21 '17 at 12:00
I updated my answer with the final solution I use now. Seems to work fine this way, it's also used in an ng-repeat with a dynamically calculated hash value. Maybe you can adapt your solution to get rid of the timeout with that, if not I think the timeout-hack is not a big deal :-) – Ursin Brunner Mar 23 '17 at 12:41
1

Thanks for adding your solution . Will try it later :) – mr_meeseeks Mar 24 '17 at 14:08

Jdenticon icons not rendering when using ng-repeat

1 Answers1