Question

我宣布了一个名为 betroomList 的非常简单的组件：

(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中它正确地显示了包含3行的列表＆＃34; item1＆＃34;，＆＃34; item2＆＃34;和＆＃34; item3＆＃34;但是在Firefox中我只有一个元素的列表＆＃34; {{item}}＆＃34;。此外，Firefox控制台包含错误：

Error: node is undefined
compositeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8623:13
nodeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:9330:24
compositeLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8620:13
publicLinkFn@http://localhost:63342/BetFriends/www/lib/angular.js:8500:30

值得注意的是，如果我用 li替换 ons-list 与 ul 和 ons-list-item ，一切都按预期工作。

有没有人知道为什么这不起作用？

提前多多感谢。

Answer 1

您可能需要使用Onsen UI。

我唯一能看到的是他们建议使用3个课程，基本上是左，中，右：

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

您在{{item}}周围使用了H1标签。也许你应该尝试只使用一个div，看看它是做什么的。

在ons-list和angular ng-repeat上遇到问题

1 个答案: