ios - Ionic Popover 适用于 XCode 模拟器，但不适用于 iPhone

Question

我的应用程序中有一个 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();
  }
}

我不得不从这段代码中删除敏感信息，但这是它的要点。

Answer 1

我对您发布的代码做了两处修改:第一个是将 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>

希望这能解决您的问题。