在使用 ons-list 和 angular ng-repeat 时遇到问题

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'];
  }
})();

如您所见，它的控制器包含 table 个字符串。在模板 HTML 中，我想用这个 table 的内容创建一个 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 行 "item1"、"item2" 和 "item3" 的列表，但在 Firefox 中我只有一个元素列表“{{item}} ”。此外，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

可能值得注意的是，如果我将 ons-list 分别替换为 ul 和 ons-list- item 和 li，一切如预期。

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

非常感谢。

Answer 1

您可能需要泡温泉 UI。

我唯一能看到的是他们推荐item使用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 时遇到问题

Having trouble with ons-list and angular ng-repeat

angularjs

angularjs-ng-repeat

onsen-ui