Я использую 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 }
];
В дополнение к этой сетке другие части моего приложения используют веб-компоненты и, следовательно, полифилл webcomponents.js.
В Chrome (браузере, который изначально реализует веб-компоненты) страница работает нормально. Но в FireFox и IE (браузеры, которые либо изначально не поддерживают веб-компоненты, либо требуют изменения пользовательских настроек) возникают проблемы с обработкой файла ng-repeat. На самом деле, кажется, что ng-repeat вообще не обрабатывается, а содержащий div, который генерирует гридстер, совершенно пуст.
Ниже приведен HTML-код, сгенерированный gridster в FireFox (обратите внимание на пустой .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 на своей странице, то gridster и ng-repeat будут отлично работать во всех браузерах. Это наводит меня на мысль, что из этих трех элементов что-то конфликтует с остальными.
Кто-нибудь сталкивался с такой проблемой? Любая помощь очень ценится.
Ссылки:
