Ionic Popover在开放时“冻结”

时间:2016-10-07 13:50:04

标签: javascript html ionic-framework ionic-popover

我有非常简单的Ionic popover代码,如下所示:

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>

控制器

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时代码工作正常,但当我点击刷新并且离子服务器仍在运行并再次打开popover时,closePopover()根本不起作用。即使我在其中添加一个html链接打开其他网站也无法正常工作。

如果我关闭离子服务器然后再次重新打开它,只要我刷新页面就会再次运行。

可能是什么问题?

我检查了ion-close组件点击监听器,一切似乎都很好。我试图在用户打开弹出框时重新创建$ionicPopover实例化但没有任何作用。

感谢所有帮助。

2 个答案:

答案 0 :(得分:0)

经过长时间的检查和测试后,我发现问题出在<ion-popover-view>组件上,完全破坏了逻辑。所以似乎有一个关于这个组件的错误,我已经在Ionic Framework的Github中打开了修复该错误的故障单。问题就在这里。 Ionic Framework Popover Freeze Issue

答案 1 :(得分:-1)

试试这个

   <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>