Question

我已经使用Jdenticon JavaScript库（https://jdenticon.com/）作为我的用户图标。它应该使用hash并使用以下内容将其渲染为SVG或Canvas：

＆＃13;

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

＆＃13;

所以问题是我试图使用angular ng-repeat在单页上呈现多个用户图标，并在data-jdenticon-hash中绑定哈希。似乎所有数据都应该是正确的，但Jdenticon抱怨它没有看到绑定的数据。如果我添加静态哈希，比如＆＃34; ff8adece0631821959f443c9d956fc39＆＃34;在data-jdenticon-hash中，它渲染所有图标，但是正确。

这是我目前的代码：

＆＃13;

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

＆＃13;

任何帮助将不胜感激！

Answer 1

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

问题是永远不会为Angular动态创建的画布调用jdenticon.update。解决方案可能是创建一个指令，负责在构造canvas元素时调用import identiconImpl from 'jdenticon'; export default () => ({ restrict: 'A', link: (scope, elem) => { identiconImpl.update(elem[0], scope.hashValue); }, scope: { hashValue: '<' } });。看一下这个小提琴的例子： https://jsfiddle.net/w5h6msvd/

source就是这个github问题：https://github.com/dmester/jdenticon/issues/10

编辑：这就是我现在在项目中使用它的方式

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

这是模板：

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

哦，这里index.js有所有必要的部分：

{{1}}

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

1 个答案: