Question

我正在使用angular-gridster在我的应用程序中显示一个网格，但我看到一些奇怪的行为，我的搜索努力没有产生任何结果。

这是我在gridster ::

中显示简单网格的代码

<div gridster="gridsterOptions">
  <ul>
    <li gridster-item="item" ng-repeat="item in standardItems">
      <div>{{item.sizeX}}</div>
    </li>
  </ul>
</div>

standardItems只是gridster-angular GitHub的例子：

$scope.standardItems = [
  { sizeX: 2, sizeY: 1, row: 0, col: 0 },
  { sizeX: 2, sizeY: 2, row: 0, col: 2 },
  ...
  { sizeX: 1, sizeY: 1, row: 2, col: 3 },
  { sizeX: 1, sizeY: 1, row: 2, col: 4 }
];

除了这个网格，我的应用程序的其他部分使用Web组件，因此使用webcomponents.js polyfill。

在Chrome（本机实现Web组件的浏览器）中，页面工作正常。但是在FireFox和IE（本机不支持Web组件或需要更改用户设置的浏览器）处理ng-repeat时遇到问题。实际上，它似乎根本不会处理ng-repeat，并且gridster生成的包含div是完全空的。

以下是由FireFox中的gridster生成的HTML（请注意空.gridster-content）：

<div style="height: 60px;" class="ng-isolate-scope gridster gridster-desktop gridster-loaded" gridster="gridsterOptions" ng-class="gridsterClass()">
  <div ng-style="previewStyle()" class="gridster-item gridster-preview-holder"></div>
  <div class="gridster-content" ng-transclude=""></div>
                                                /\
                         Why is this empty? ----||
</div>

如果我删除了webcomponents.js polyfill加载到我的网页上，那么gridster和ng-repeat在所有浏览器中都能正常运行。这让我相信这三个项目某事与其他项目冲突。

有没有人遇到过这种问题？非常感谢任何帮助。

链接：

angular-gridster

webcomponents.js

Answer 1

这是webcomponents库的问题，您可以找到对它的引用https://github.com/webcomponents/webcomponentsjs/pull/393

Angular ng-repeat，Gridster和Web Components是冲突的

1 个答案: