关闭离子弹出框答案

【问题标题】：Closing ionic popover关闭离子弹出框
【发布时间】：2016-03-30 00:45:33
【问题描述】：

我有一个弹出框模板，例如：

<ion-popover-view class="fit">
  <ion-content scroll="false">
    <ion-list>
      <ion-item ng-click="popoverGotoView(foo, {id: 1})">
        Option 1
      </ion-item>
      <ion-item ng-click="popoverGotoView(foo, {id: 2})">
        Option 2
      </ion-item>
    </ion-list>
  </ion-content>
</ion-popover-view>

在控制器中我有

$scope.popoverGotoView = function(path, arg) {
    $scope.popover.hide();
    $state.go(path, args);
}

$scope.popover 是基于 ionic 文档的。弹出框显示，单击它会转到另一个视图，但它不会隐藏。我尝试调试它并隐藏方法，但在内部，离子正在更改弹出类，但在 DOM 中没有效果。单击外部弹出框会正确隐藏。

我做错了什么？

【问题讨论】：

标签： ionic-framework ionic popover

【解决方案1】：

这是一个代码 sn-p。问题出在哪里？

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeCtrl'
        }
      }
    })
    .state('tabs.map', {
      url: "/map",
      views: {
        'map-tab': {
          templateUrl: "templates/map.html",
          controller: 'MapCtrl'
        }
      }
    });

   $urlRouterProvider.otherwise("/tab/home");

})

.run(function($rootScope) {

})

.controller('HomeCtrl', function($scope, $state, $ionicPopover) {
  console.log('HomeCtrl');
    $ionicPopover.fromTemplateUrl('templates/popover.html', {
      scope: $scope,
    }).then(function(popover) {
      $scope.popover = popover;
    });
  
  $scope.popoverGotoView = function(path, arg) {
    $scope.popover.hide();
    $state.go(path, arg);
  }
  
})

.controller('MapCtrl', function($scope, $state, $ionicPopover) {
  console.log('MapCtrl');
    $ionicPopover.fromTemplateUrl('templates/popover.html', {
      scope: $scope,
    }).then(function(popover) {
      $scope.popover = popover;
    });
  
  $scope.popoverGotoView = function(path, arg) {
    $scope.popover.hide();
    $state.go(path, arg);
  }

});

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tabs Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body>

  <ion-nav-bar class="bar-positive">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>

  <ion-nav-view></ion-nav-view>

  <script id="templates/tabs.html" type="text/ng-template">
    <ion-tabs class="tabs-icon-top tabs-positive">

      <ion-tab title="Home" icon="ion-home" href="#/tab/home">
        <ion-nav-view name="home-tab"></ion-nav-view>
      </ion-tab>

      <ion-tab title="Map" icon="ion-ios-world" ui-sref="tabs.map">
        <ion-nav-view name="map-tab"></ion-nav-view>
      </ion-tab>

    </ion-tabs>
  </script>

  <script id="templates/home.html" type="text/ng-template">
    <ion-view view-title="Home">
      <ion-nav-buttons side="right">
        <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
      </ion-nav-buttons>
      <ion-content class="padding">
        Home view
        <p>
          <a class="button icon icon-right ion-chevron-right" href="#/tab/map">Go to Map</a>
        </p>
      </ion-content>
    </ion-view>
  </script>

  <script id="templates/map.html" type="text/ng-template">
    <ion-view title="">
      <ion-nav-buttons side="left">
        <input id="places" class="controls" type="text" autocomplete placeholder="Enter a location" />
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
      </ion-nav-buttons>

      <ion-content>
        Map view
      </ion-content>

    </ion-view>
  </script>

    <script id="templates/popover.html" type="text/ng-template">
    <ion-popover-view class="fit">
      <ion-content scroll="false">
        <ion-list>
          <ion-item ng-click="popoverGotoView('tabs.map', {id: 1})">
            Option 1 Map
          </ion-item>
          <ion-item ng-click="popoverGotoView('tabs.home', {id: 2})">
            Option 2 Home
          </ion-item>
        </ion-list>
      </ion-content>
    </ion-popover-view>
  </script>
  
</body>

</html>

【讨论】：

我有相同的代码，但在我的应用程序弹出窗口中保持打开状态...我将您的示例从 ng-click 更改为 on-hold 但它仍然有效，所以我仍然不知道会发生什么。但是，例如，谢谢，现在我确定错误在其他地方。