Question

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

我必须从一些代码中删除敏感信息，但这是它的要点。

Answer 1

我对您发布的代码做了两处修改：第一个是将弹出模板的路径更改为：

'templates/search/filter-popover.html'

而不是

'/templates/search/filter-popover.html'

开始引用此文件

第二个更改是在打开弹出窗口时传递$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', 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>

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

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

1 个答案: