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显示什么,但是没有它的那个显示'aaa'正确,为什么？

Answer 1

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

你可以通过在那里script标记类型来做同样的事情text/ons-template.它与type/ng-template角度相同.

模板

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

   ...content here...

</script>

添加ng-controller了ons-page将使它通过实例的工作controller指定ng-controller指令.

码

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