Javascript 使用listView和PockDB的Ionic(v1)应用程序存在问题
在我的Ionic应用程序中,有一个列表视图,其中包含用户可以单击的卡片。单击后,他们将看到一个包含更多详细信息的页面。所有内容都在PockDB数据库中(也远程在Firebase中)。生成此列表的代码如下所示:Javascript 使用listView和PockDB的Ionic(v1)应用程序存在问题,javascript,android,ios,angularjs,ionic-framework,Javascript,Android,Ios,Angularjs,Ionic Framework,在我的Ionic应用程序中,有一个列表视图,其中包含用户可以单击的卡片。单击后,他们将看到一个包含更多详细信息的页面。所有内容都在PockDB数据库中(也远程在Firebase中)。生成此列表的代码如下所示: <div class="card" ng-repeat="challenge in vm.challenges track by $index" ng-class="{'bounceInLeft': $index % 2 !== 0, 'bounceInRight':
<div class="card" ng-repeat="challenge in vm.challenges track by $index" ng-class="{'bounceInLeft': $index % 2 !== 0, 'bounceInRight': $index % 2 === 0}" ng-click="vm.goToChallenge(challenge)">
<div class="item item-text-wrap">
<div class="resource">
<img ng-src="{{ challenge.resources[0].image }}" ng-attr-alt="{{ challenge.resources[0].caption }}" ng-srcset="{{ challenge.resources[0].srcset }}" ng-if="challenge.resources && challenge.resources[0].type === 'img'">
<img ng-src="{{ challenge.resources[0].url | getYouTubeImage }}" ng-attr-alt="{{ challenge.resources[0].caption }}" ng-if="challenge.resources && challenge.resources[0].type === 'video'">
<i class="ion-play" ng-if="challenge.resources && challenge.resources[0].type === 'video'"></i>
</div>
<p class="category">{{ challenge.categoryName }}</p>
<p class="name">{{ challenge.name }}</p>
</div>
<div class="item footer item-divider">
<div class="row">
<div class="col col-50">
<i class="ion-calendar"></i> {{ challenge.seasonsObjects.join(', ') }}
</div>
<div class="col col-50">
<div>
<i class="ion-bookmark" ng-repeat="bookmark in (challenge.ranking + 1) | range track by $index"></i>
</div>
{{ challenge.rankingName }}
</div>
</div>
</div>
</div>
NavigationService具有以下代码:
angular.module('starter').factory('NavigationService', ['$window', '$q', 'ionic', '$state', '$ionicHistory', '$ionicLoading', '$ionicPopup', '$cordovaNativeAudio', '$cordovaSocialSharing', '$cordovaNetwork', '$ionicSideMenuDelegate', '$ionicNavBarDelegate', '$ionicTabsDelegate', NavigationService]);
function NavigationService($window, $q, ionic, $state, $ionicHistory, $ionicLoading, $ionicPopup, $cordovaNativeAudio, $cordovaSocialSharing, $cordovaNetwork, $ionicSideMenuDelegate, $ionicNavBarDelegate, $ionicTabsDelegate) {
let factory = {};
// Set root of history stack to the registration page with historyRoot: true
// Disable animation from slider to registration page to avoid weird transition
// in wich the header bar pops down. This is because we do not have a header bar in the slider
factory.setRootAndGo = (state, params = {}) => {
$ionicHistory.nextViewOptions({
historyRoot: true,
disableAnimate: true
});
factory.go(state, params);
};
factory.go = (state, params = {}) => {
$state.go(state, params, {
location: 'replace',
reload: true
});
};
factory.replace = (state, params = {}) => {
$ionicHistory.currentView($ionicHistory.backView());
factory.go(state, params);
};
factory.toggleMenu = () => $ionicSideMenuDelegate.toggleRight();
factory.showTabs = () => {
$ionicTabsDelegate.showBar(true);
};
factory.hideTabs = () => {
$ionicTabsDelegate.showBar(false);
};
factory.setTitle = (title) => $ionicNavBarDelegate.title(title);
factory.getParams = () => $state.params;
factory.getNavHistory = () => $ionicHistory.viewHistory();
factory.showLoading = (options) => $ionicLoading.show(options);
factory.hideLoading = () => $ionicLoading.hide();
factory.isWebView = () => ionic.Platform.isWebView();
factory.isOffline = () => factory.isWebView() && $cordovaNetwork.isOffline();
factory.goToWebPage = (url) => $window.open(url, '_system');
factory.shareFacebook = (text, img, url) => {
let defer = $q.defer();
$cordovaSocialSharing.shareViaFacebook(text, img, url)
.then(defer.resolve, defer.reject);
return defer.promise;
};
factory.shareTwitter = (text, img, url) => {
let defer = $q.defer();
$cordovaSocialSharing.shareViaTwitter(text, img, url)
.then(defer.resolve, defer.reject);
return defer.promise;
};
factory.playSound = (name) => $cordovaNativeAudio.play(name);
factory.alert = (title, text) => $ionicPopup.alert({
title: title,
template: text
});
return factory;
};
请问,有人知道如何解决这个问题吗?我已经找了几天了,不知道为什么。谢谢
编辑
当我和chrome://inspect 在虚拟设备中(通过Genymotion),我在控制台中遇到以下错误
TypeError:对象#没有方法“forEach”
在challengetrl.vm.onAfterEnter(file:///android_asset/www/build/app.js:226:12)
以百万美元计(file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:178:407)
在Object.q.emit(file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:470:20592)
在m(file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:470:19062)
在HTMLElement.g(file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:470:18921)
在Pf(file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:70:477)
在HTMLElement.Of.d(file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:70:424)爱奥尼亚束最小js:150
下面可以找到onAfterEnter代码块
vm.onAfterEnter = () => {
//let ionViewDOM = $window.document.querySelectorAll('.challenge.pane .scroll-content')[0];
let ionViewDOM = $window.innerHeight - 43; // innerHeight minus the heigh of the title bar
let popovers = $window.document.querySelectorAll('.message-popover');
popovers.forEach((popover) => {
//popover.style.height = `${ionViewDOM.clientHeight}px`;
popover.style.height = ionViewDOM + `px`;
if (ionViewDOM.clientHeight < 450) {
popover.classList.add('small-screen');
} else if (ionViewDOM.clientHeight < 550) {
popover.classList.add('medium-screen');
} else {
popover.classList.remove('small-screen');
popover.classList.remove('medium-screen');
}
});
let params = NavigationService.getParams();
ChallengeService.get(params.challenge)
.then((result) => {
vm.challenge = result;
switch (vm.challenge.status) {
case 'accepted':
vm.challengeAccepted = true;
break;
case 'completed':
vm.challengeCompleted = true;
break;
}
NavigationService.setTitle(vm.challenge.gardenType.name);
vm.challengeLoaded = true;
ChallengeService.listRandomAvailableForUser(params.challenge, vm.challenge.gardenType.challenges)
.then((result) => vm.randomChallenges = result);
});
};
vm.onAfterEnter=()=>{
//让ionViewDOM=$window.document.querySelectorAll('.challenge.pane.scroll content')[0];
让ionViewDOM=$window.innerHeight-43;//innerHeight减去标题栏的高度
让popover=$window.document.querySelectorAll('.message popover');
popover.forEach((popover)=>{
//popover.style.height=`${ionViewDOM.clientHeight}px`;
popover.style.height=ionViewDOM+`px`;
if(ionViewDOM.clientHeight<450){
popover.classList.add('small-screen');
}else if(ionViewDOM.clientHeight<550){
popover.classList.add('medium-screen');
}否则{
popover.classList.remove('small-screen');
popover.classList.remove('medium-screen');
}
});
设params=NavigationService.getParams();
ChallengeService.get(params.challenge)
。然后((结果)=>{
vm.challenge=结果;
交换机(vm.challenge.status){
“受理”案件:
vm.challengeacepted=true;
打破
案件‘已完成’:
vm.challengeCompleted=true;
打破
}
setTitle(vm.challenge.gardenType.name);
vm.challengeLoaded=true;
ChallengeService.listRandomAvailableForUser(params.challenge,vm.challenge.gardenType.challenges)
。然后((结果)=>vm.randomChallenges=结果);
});
};
当我(通过XCode)登录iPhone5模拟器时,我得到了以下类似的错误
错误:popovers.forEach不是函数。(在“popovers.forEach”中,
“popovers.forEach”未定义)
所以这和爆米花有关。是否
$window.document.querySelectorAll('.message popover')
没有返回任何内容?带有message popover
类的div最初隐藏在页面上,并且仅在满足特定条件时才显示(使用ng show
)。在出现foreach错误的情况下,页面似乎未完全呈现。在执行页面上的querySelectorAll之前,您是否尝试过设置超时或类似设置?您是否检查了开发人员控制台中提到的设备上的错误?@bert您是否尝试过android的crosswalk插件,并在两台设备上进行了测试,并让我知道它运行良好还是正常not@Webruster没有,我还没有试过。但我想,这只能解决安卓系统的问题,而不能解决iPhone的问题。这个问题在Android和iOS上都会发生。所以我猜这与其他事情有关?@BertCarremans,检查android并让我知道,将提供一种在IOS中工作的方法。似乎错误在于使用非数组对象作为数组。
vm.onAfterEnter = () => {
//let ionViewDOM = $window.document.querySelectorAll('.challenge.pane .scroll-content')[0];
let ionViewDOM = $window.innerHeight - 43; // innerHeight minus the heigh of the title bar
let popovers = $window.document.querySelectorAll('.message-popover');
popovers.forEach((popover) => {
//popover.style.height = `${ionViewDOM.clientHeight}px`;
popover.style.height = ionViewDOM + `px`;
if (ionViewDOM.clientHeight < 450) {
popover.classList.add('small-screen');
} else if (ionViewDOM.clientHeight < 550) {
popover.classList.add('medium-screen');
} else {
popover.classList.remove('small-screen');
popover.classList.remove('medium-screen');
}
});
let params = NavigationService.getParams();
ChallengeService.get(params.challenge)
.then((result) => {
vm.challenge = result;
switch (vm.challenge.status) {
case 'accepted':
vm.challengeAccepted = true;
break;
case 'completed':
vm.challengeCompleted = true;
break;
}
NavigationService.setTitle(vm.challenge.gardenType.name);
vm.challengeLoaded = true;
ChallengeService.listRandomAvailableForUser(params.challenge, vm.challenge.gardenType.challenges)
.then((result) => vm.randomChallenges = result);
});
};