javascript - 使用ng-repeat时无法呈现Jdenticon图标

我一直在为用户图标使用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在单个页面上呈现多个用户图标，并在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>

任何帮助，将不胜感激！

最佳答案

我不是jdention的专家，但是在为我的项目实施它时偶然发现了这一点。也许它可以帮助您：


  问题在于，从未为Angular动态创建的画布调用jdenticon.update。解决方案可能是创建一个指令，该指令在构造canvas元素时负责调用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);

关于javascript - 使用ng-repeat时无法呈现Jdenticon图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41945445/