Блог

У меня есть очень простой ионный всплывающий код, который выглядит следующим образом:

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 код, он работает нормально, но когда я нажимаю обновление, а сервер ionic все еще запущен, и снова открываю всплывающее окно, closePopover() оно вообще не работает. Даже если я добавлю в него HTML-ссылку, чтобы открыть другой веб-сайт, это не сработает.

Если я закрою сервер ionic, а затем снова открою его, он снова будет работать, пока я обновляю страницу.

В чем может быть проблема?

Я проверил ion-close прослушиватель щелчков компонентов, и все кажется нормальным. Я пытался воссоздать $ionicPopover экземпляр всякий раз, когда пользователь открывает всплывающее окно, но ничего не работает.

Любая помощь приветствуется.

После долгой проверки и тестирования я обнаружил, что проблема заключалась в <ion-popover-view> компоненте, который полностью нарушал логику. Похоже, в этом компоненте есть ошибка, и я уже открыл тикет в Github Ionic Framework, чтобы исправить ошибку. Проблема находится здесь. Проблема с зависанием всплывающего окна Ionic Framework

Попробуйте это

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