我有一个非常简单的Ionic弹出窗口代码,如下:
html (main-view.html)
<div>
<a href="" ng-click="openPopover()">Open Popup</a>
</div>
html (my-view.html)
<ion-popover-view>
<ion-content>
<div class="row">
<div class="col col-90"><h4>{{ 'Test header' }}</h4></div>
<div class="col col-10">
<i class="ion-close" ng-click="closePopover()"></i>
</div>
</div>
<div class="row">
<div class="col col-100">
<p>
{{ 'Some content here' }}
</p>
</div>
</div>
</ion-content>
</ion-popover-view>
h2控制器 angular.module('myApp').controller('MainCtrl', function($scope, $rootScope, $ionicPopover){
$ionicPopover.fromTemplateUrl('views/my-view.html', {
scope: $scope,
"backdropClickToClose": false
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event){
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
};
angular.module('myApp').controller('MainCtrl', function($scope, $rootScope, $ionicPopover){
$ionicPopover.fromTemplateUrl('views/my-view.html', {
scope: $scope,
"backdropClickToClose": false
}).then(function(popover) {
$scope.popover = popover;
});
$scope.openPopover = function($event){
$scope.popover.show($event);
};
$scope.closePopover = function() {
$scope.popover.hide();
};
};
这里的问题是每当我运行ionic serve
代码工作正常,但是当我点击刷新和离子服务器仍在运行并再次打开弹出窗口时,closePopover()
根本不工作。即使我在里面添加一个html链接来打开其他网站,它也不会工作。
如果我关闭ionic服务器,然后重新打开它,只要我刷新页面,它就会再次工作。
有什么问题吗?
我已经检查了ion-close
组件点击监听器,一切似乎都很好。每当用户打开弹出窗口时,我都试图重新创建$ionicPopover
实例化,但没有任何效果。
经过长时间的检查和测试,我发现问题是与<ion-popover-view>
组件完全打破了逻辑。所以似乎有一个关于这个组件的错误,我已经在Ionic框架的Github中打开了票来修复这个错误。问题就在这里。离子框架弹出窗口冻结问题
试试这个
<ion-popover-view>
<ion-content>
<div class="row">
<div class="col col-90"><h4>{{ 'Test header' }}</h4></div>
<div class="col col-10">
<i class="ion-close" ng-click="popover.hide();"></i>
</div>
</div>
<div class="row">
<div class="col col-100">
<p>
{{ 'Some content here' }}
</p>
</div>
</div>
</ion-content>
</ion-popover-view>