2016-11-11 4 views
1

Я объявил очень простой компонент, называемый betroomList:Возникла проблемы с ONS-списком и угловыми нг-повтором

(function() { 
    'use strict'; 

    angular.module('betfriends') 
    .component('betroomList', { 
     templateUrl: 'src/home/betroomList.template.html', 
     controller: BetroomListController, 
     bindings: { 
     betrooms: '<' 
     } 
    }); 

    function BetroomListController() { 
    var ctrl = this; 

    ctrl.betrooms = ['item1', 'item2', 'item3']; 
    } 
})(); 

Как вы можете видеть, его контроллер содержит таблицу строк. В HTML-шаблоне я хотел бы создать ons-list с содержанием этой таблицы. Вот что содержит betroomList.template.html:

<ons-list> 
    <ons-list-item ng-repeat="item in $ctrl.betrooms"> 
    <h1>{{item}}</h1> 
    </ons-list-item> 
</ons-list> 

Моя проблема заключается в том, что в то время как он работает отлично в Google Chome это не так Firefox. Действительно, в Chrome он правильно отображает список с тремя строками «item1», «item2» и «item3», но в Firefox у меня есть только список из одного элемента «{{item}}». Кроме того, консоль Firefox содержит ошибку:

Error: node is undefined 
composi[email protected]://localhost:63342/BetFriends/www/lib/angular.js:8623:13 
[email protected]://localhost:63342/BetFriends/www/lib/angular.js:9330:24 
[email protected]://localhost:63342/BetFriends/www/lib/angular.js:8620:13 
[email protected]://localhost:63342/BetFriends/www/lib/angular.js:8500:30 

Может быть, стоит отметить, что, если я заменю соответственно ONS-список с ул и ONS-элемента списка с литий, все работает так, как ожидалось.

У кого-нибудь есть идея, почему это не работает?

Большое спасибо.

+0

В каких случаях указывается список ons-list и ons-list-item? – Mikkel

+0

Они оба являются компонентами Onsen UI, я сам их не определяю. Например, вот документ для : https://onsen.io/v2/docs/js/ons-list-item.html –

ответ

0

Возможно, вам придется принять его с помощью пользовательского интерфейса Onsen.

Единственное, что я могу видеть, что они рекомендуют использовать 3 класса для элемента, в основном будет левый, центральный и правый:

<ons-list-item> 
    <div class="left">Left</div> 
    <div class="center">Center</div> 
    <div class="right">Right</div> 
</ons-list-item> 

Вы с помощью тега H1 вокруг вашего {{пункт}} , Возможно, вам стоит попробовать использовать только div и посмотреть, что он делает.

+0

Действительно, при использовании этих конкретных div, он работает (ошибка исчезла, и теперь работает интерполяция {{item}}). Это странно, хотя, как в примерах, которые они приводят в документе, они не всегда используют их. В любом случае, спасибо :) –