ฉันเพิ่งเริ่มทำงานกับ 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 ฉันพลาดอะไรไปที่นี่? ฉันจะขอบคุณมากสำหรับคำแนะนำหรือคำแนะนำใด ๆ
