关闭离子弹出窗口
Closing ionic popover
我有一个像这样的弹出框模板:
<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 文档获取的。弹出窗口显示,单击它会转到另一个视图,但不会隐藏。我尝试调试并进入隐藏方法,但在内部,ionic 正在更改弹出窗口 类,但在 DOM 中没有效果。单击外部弹出窗口它会正确隐藏。
我做错了什么?
这是一个代码片段。问题出在哪里?
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>
我有一个像这样的弹出框模板:
<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 文档获取的。弹出窗口显示,单击它会转到另一个视图,但不会隐藏。我尝试调试并进入隐藏方法,但在内部,ionic 正在更改弹出窗口 类,但在 DOM 中没有效果。单击外部弹出窗口它会正确隐藏。
我做错了什么?
这是一个代码片段。问题出在哪里?
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>