Не удается прокрутить содержимое Onsen UI / AngularJS

Я только начал работать с 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), но это не так. Я компилирую приложение с помощью PhoneGap Build версии 3.5.0. Что мне здесь не хватает? Буду очень благодарен за любой совет или наставление.


person Alex    schedule 28.09.2014    source источник
comment
Есть ли у (ons-scoller) какой-либо CSS, связанный с ним, например, переполнение? -- w3schools.com/cssref/pr_pos_overflow.asp   -  person Tasos    schedule 28.09.2014
comment
Нет — не было добавлено никаких дополнительных CSS, кроме того, что включено в CSS пользовательского интерфейса Onsen.   -  person Alex    schedule 28.09.2014
comment
Странно, похоже, что некоторые из них были в css (позиция: исправлена), что останавливает прокрутку, если только с самим подключением что-то не так.   -  person Tasos    schedule 28.09.2014
comment
Вы имеете в виду, что вы не можете прокручивать список своих элементов в iOS? Я попробовал ваш код и создал длинный список для отображения в вашем образце HTML. Я могу правильно прокручивать все элементы с помощью своего iPhone5.   -  person khemry    schedule 30.09.2014
comment
Да, прокрутка невозможна на любых устройствах iOS! Скомпилировал код со сборкой PhoneGap и ничего с ним не сделал :(   -  person Alex    schedule 30.09.2014


Ответы (1)


Возможно, у вас просто опечатка.

Изменить с <ons-scoller>...<ons-scoller> на <ons-scroller>...<ons-scroller>

person Rudzainy Rahman    schedule 17.11.2015