Question

我刚刚开始使用AngularJS，我正试图解决它。我似乎从jQuery中汲取了很多坏习惯。我有一个使用Onsen UI / AngularJS和jQuery编写的简单移动页面。我想要的内容正确显示，但我无法滚动内容到最后。我的页面HTML代码如下

    <ons-navigator title="Navigator" var="appNavigator">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-button style="background-color: white;color: #d00052;"
                            ng-click="appNavigator.resetToPage('home.html', options);"><i class="fa fa-home fa-2"></i>
                </ons-button>
            </div>
            <div class="center">Notice Board</div>
            <div class="right">
                <ons-button style="background-color: white;color: #d00052;"
                            ng-click="appNavigator.resetToPage('login.html', options);"><i
                        class="fa fa-power-off fa-2"></i></ons-button>
            </div>
        </ons-toolbar>
<ons-scoller>
        <ons-list ng-controller="MyCtrl">
            <div ng-repeat="group in groups" style="z-index: 9999;">
                <ons-list-item ng-click="toggleGroup(group)" class="title" ng-class="{active:isGroupShown(group)}">
                    <ons-icon icon="minus-square-o" ng-if="isGroupShown(group)"></ons-icon>
                    <ons-icon icon="plus-square-o" ng-if="!isGroupShown(group)"></ons-icon>
                    <b>{{group.title}}</b>
                </ons-list-item>
                <ons-list-item class="item-accordion" ng-show="isGroupShown(group)">
                    <p style="line-height: 22px;" ng-bind-html="group.content">...</p>
                </ons-list-item>
            </div>
        </ons-list>
</ons-scoller>
    </ons-page>
</ons-navigator>

此页面的控制器如下

    app.controller('MyCtrl', function($scope) {
    $scope.groups = [];
    $.ajax({
        type: 'GET',
        url: 'https://mywebsite/service?mode=data',
        dataType: 'jsonp',
        timeout: 5000,
        success: function(data) {
            $scope.groups = data;
            $scope.$apply();
        },
        error: function(data) {
            $scope.error = true;
            $scope.$apply();
        }
    });



    $scope.toggleGroup = function(group) {
        if ($scope.isGroupShown(group)) {
            $scope.shownGroup = null;
        } else {
            $scope.shownGroup = group;
        }
    };
    $scope.isGroupShown = function(group) {
        return $scope.shownGroup === group;
    };

});

我认为，因为html代码使用ons-scroller - 它会正确滚动（在iPhone上），但它不会。我使用版本3.5.0上的PhoneGap Build编译应用程序。我在这里错过了什么？我会非常感谢任何建议或指导。

Answer 1

你可能只有一个错字。

从<ons-scoller>...<ons-scoller>更改为<ons-scroller>...<ons-scroller>

无法滚动内容Onsen UI / AngularJS

1 个答案: