我的应用程序中有一个 Ionic Popover。当我运行 ionic serve、ionic emulate ios 和 XCode 模拟器时,弹出窗口出现。但是,只要我在 XCode 上将应用程序模拟到我的 iPhone 4S 或使用 Ionic View 应用程序查看我自己的应用程序,弹出窗口就不会出现。我已经调试了一切,但代码不起作用。运行该应用程序时,我的控制台上没有出现任何错误。
弹出窗口将出现在我的 4S 上,但没有关于弹出窗口如何出现的逻辑。我会更改一段代码,弹出窗口出现,然后当我再次更改它时,弹出窗口消失。我重复这个过程,然后返回到我的旧代码版本,它可以工作,但它不工作。这令人沮丧。更糟糕的是,我担心没有人会回复此消息。任何关于为什么 iPhone 模拟器和我的实际 iPhone 之间存在差异的帮助都会很棒。谢谢。
按钮 HTML
<div ng-controller="FilterPopoverController as filterPopover" class="text-right">
<div on-tap="filterPopover.open()" ng-class="{filterButtonOpened: filterPopover.opened}" id="filter-button">
<span class="assertive" >
<i class="icon ion-arrow-down-b"></i>
<span class="bold">FILTER</span>
</span>
</div>
</div>
HTML 弹出框
<ion-popover-view id="filterPopover">
<ion-header-bar class="bar-dark">
<h1 id="popoverTitle" class="bold">FILTER BY</h1>
</ion-header-bar>
<ion-content>
<p>Content here</p>
</ion-content>
</ion-popover-view>
弹出框 Controller
.controller('FilterPopoverController', filterPopoverController)
filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout'];
function filterPopoverController($ionicPopover, $filter, $scope, $timeout) {
var vm = this;
vm.open = open;
vm.popover = null;
vm.opened = false;
activate();
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
vm.popover.remove();
vm.opened = false;
});
$scope.$on('popover.hidden', function() {
vm.opened = false;
});
function activate( ) {
$ionicPopover.fromTemplateUrl('/templates/search/filter-popover.html', {
scope: $scope
}).then(function(popover) {
vm.popover = popover;
});
}
function open( ) {
vm.opened = true;
vm.popover.show();
}
}
我不得不从这段代码中删除敏感信息,但这是它的要点。
最佳答案
我对您发布的代码做了两处修改: 第一个是将 popover 模板的路径更改为:
'templates/search/filter-popover.html'
代替
'/templates/search/filter-popover.html'
你需要从当前目录而不是根目录开始引用这个文件
第二个改变是在打开弹出窗口时传递$event
输入,这是来自ionic Popover的官方文档
将这两项更改应用到发布的代码后,我设法在桌面浏览器、ios 模拟器、真实 iPhone 4 上一致地看到弹出窗口
这是最终代码:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('FilterPopoverController', filterPopoverController)
filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout'];
function filterPopoverController($ionicPopover, $filter, $scope, $timeout) {
var vm = this;
vm.open = open;
vm.popover = null;
vm.opened = false;
activate();
//Cleanup the popover when we're done with it!
$scope.$on('$destroy', function() {
vm.popover.remove();
vm.opened = false;
});
$scope.$on('popover.hidden', function() {
vm.opened = false;
});
function activate( ) {
$ionicPopover.fromTemplateUrl('templates/search/filter-popover.html', {
scope: $scope
}).then(function(popover) {
vm.popover = popover;
});
}
function open( $event ) {
vm.opened = true;
vm.popover.show($event);
}
}
<div ng-controller="FilterPopoverController as filterPopover" class="text-right">
<div on-tap="filterPopover.open($event)" ng-class="{filterButtonOpened: filterPopover.opened}" id="filter-button">
<span class="assertive" >
<i class="icon ion-arrow-down-b"></i>
<span class="bold">FILTER</span>
</span>
</div>
</div>
希望这能解决您的问题。
关于ios - Ionic Popover 适用于 XCode 模拟器,但不适用于 iPhone,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32128818/