1

我一直在为我的用户图标使用 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>

任何帮助，将不胜感激！

4

1 回答 1

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);
于 2017-03-20T14:47:58.347 回答