ios – Ionic Popover适用于XCode Simulator但不适用于iPhone

我的应用程序上有一个Ionic Popover.当我运行离子服务器,离子模拟ios和XCode模拟器时,会出现popover.但是,只要我在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>

Popover 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>

Popover控制器

.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'

您需要从当前目录而不是根目录开始引用此文件

第二个改变是在打开popover时传递$event输入,这是来自ionic Popover的官方文档

将这两个更改应用到已发布的代码后,我设法在桌面浏览器,ios模拟器,真正的iPhone 4上看到popover

这是最终的代码：

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',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>

我希望这能解决你的问题.