Закрытие ионного поповер

У меня есть шаблон поповер как:Закрытие ионного поповер

<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.popover это получить на основе ионных Docs. Popover показывает, по щелчку он переходит в другое представление, но не скрывает. Я пытался отлаживать, и он идет, чтобы скрыть метод, но внутри, ionic меняет всплывающие классы без эффекта в DOM. Щелчок снаружи поверх него скрывается должным образом.

Что я делаю неправильно?

источник

2015-12-23 andriew

Это фрагмент кода. В чем проблема?

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>

источник

2015-12-23 19:02:28 beaver

У меня тот же код, но в мое приложение всплывающее окно остается открытым ... Я изменил свой пример FOM нг щелчок, чтобы на удержании, но подоконник работы, поэтому до сих пор у меня нет что происходит. Но, к примеру, спасибо, теперь я уверен, что ошибка где-то еще. – andriew

Закрытие ионного поповер

ответ

Смежные вопросы