javascript - ng-repeat 不适用于 onsen ui

Question

我要疯了，这是一件小事，但我找不到解决方案......我有这个 js 文件(angularjs 应用程序在 html 文档的开头初始化)

app.controller('slidingMenuCtrl', function($scope) {
    $scope.categories = [
        {title: 'Festas', icon: 'ion-ios-pint', notifications: 3},
        {title: 'Palestras', icon: 'fa-microphone', notifications: 0}
    ];
    $scope.test = 'aaa';
});

在我的 html 中的某处

<ons-template id="menu.html" ng-controller="slidingMenuCtrl">
    <ons-page>
        <div ng-repeat="x in categories">
            {{x.title}}
        </div>
        <div>
            {{test}}
        </div>
    </ons-page>
</ons-template>

带有 ng-repeat 的 div 什么都不显示，但是没有它的 div 正确显示'aaa'，为什么？

Answer 1

ons-template 模板不支持 ng-controller 指令，基本上它需要一个想法来处理模板，然后如果我们要求模板超过 http 它返回已注册的 ons-template 和那个 id，这里你有 menu.html

你可以通过在 text/ons-template 类型中添加 script 标签来做同样的事情。它与 Angular 中的 type/ng-template 相同。

模板

<script type="text/ons-template" id="main.html">

   ...content here...

</script>

在 ons-page 上添加 ng-controller 将通过实例化 controller 指定的 ng-controller 使其工作指令。

代码

<ons-page ng-controller="slidingMenuCtrl">
    <div ng-repeat="x in categories">
        {{x.title}}
    </div>
    <div>
        {{test}}
    </div>
</ons-page>