似乎无法将简单数据绑定到 Onsen UI 中的 ons-list-item

Question

我一直在努力让基于Onsen UI 的应用程序（在Monaca 中运行）填充<ons-list-item> 数据，但似乎找不到正确的魔法语法。

我从 "Sliding Menu" sample template 开始，它工作得很好，选择菜单项导航到特定页面，例如：

announcements.html

<ons-navigator var="myNavigator">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
      </div>
      <div class="center">Announcements</div>
    </ons-toolbar>
    <ons-list>
      <ons-list-item modifier="chevron" ng-repeat="item in items">{{item.title}} ({{item.description}})</ons-list-item>
    </ons-list>
  </ons-page>
</ons-navigator>

如果我将ng-repeat 属性值更改为items in [1,2,3,4,5]，它会在我的列表中呈现5 个项目。

我正在努力让items 数据在外部定义。无论我将 ng-controller="AnnouncementController" 属性放在哪里（在 ons-list-item 或其任何父项上），我似乎都无法识别或运行它。

我已经看到很多在 ons 应用上设置 .controller() 的示例，以及名称与所需控制器匹配的普通函数（如下所示）。

function AnnouncementController($scope, $http){
  $scope.items = [
    {
      title: 'Item 1',
      description: 'Item 1 Description'
    },
    {
      title: 'Item 2',
      description: 'Item 2 Description'
    },
    {
      title: 'Item 3',
      description: 'Item 3 Description'
    }
  ];
}

但我无法使用任何组合。如果我需要使用控制器，或者只是调用“init/ready”函数，我很好。目前我只想得到任何有效的东西。

谁能阐明“魔术”绑定可以/应该在哪里完成？

Answer 1

ng-controller 应放在 ons-list（或父级）内，ng-repeat 应放在 ons-list-item 内，如下所示：

<ons-list ng-controller="MyController">
    <ons-list-item ng-repeat="item in items">
         {{item.title}} - {{item.description}}
    </ons-list-item>
</ons-list>

这足以制作一个动态列表。你可以在这里查看：http://codepen.io/frankdiox/pen/wajagY

如果您需要更多示例，只需检查 MasterDetail 模板而不是 SlidingMenu 一个；)

希望对你有帮助！

编辑：

全局控制器函数在 AngularJS 中已被弃用。尝试使用类似于 Codepen 示例中的内容。