Multiple modals on single view iOS problem

ionic-v1
1

I have a view that contains multiple modals. This works correctly in chrome and usually works correctly the first time I open and close the modals on an iOS device, however, if I open/close the modal multiple times on device the modal either doesn’t open or takes up to 2 minutes to open.

                <li class="item item-toggle">
                Religion:
                <label class="toggle">
                    <input type="checkbox" ng-change="toggleReligionModal()" ng-model="searchCriteria.religionRequired">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>
            <li class="item item-toggle">
                Language:
                <label class="toggle">
                    <input type="checkbox" ng-change="toggleLanguageModal()" ng-model="searchCriteria.languageRequired">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </li>

Controller:

                // Load the modals
            $ionicModal.fromTemplateUrl('templates/language.html', function (modal) { 
                $scope.languageModal = modal;
            }, {
                scope: $scope,
                animation: 'slide-in-up'
            });
            
            $ionicModal.fromTemplateUrl('templates/religions.html', function (modal) {
                $scope.religionModal = modal;
            }, {
                scope: $scope,
                animation: 'slide-in-up'
            });

            $scope.toggleLanguageModal = function () {
                if ($scope.searchCriteria.languageRequired) {
                    $scope.openLanguageModal();
                } else {
                    $scope.closeLanguageModal();
                }
            };
            
            $scope.toggleReligionModal = function() {
                if ($scope.searchCriteria.religionRequired) {
                    $scope.openReligionModal();   
                } else {
                    $scope.closeReligionModal();   
                }
            };

            //Open and close modals
            $scope.openLanguageModal = function() {
                $scope.languageModal.show();
            };
            $scope.openReligionModal = function() {
                $scope.religionModal.show();
            };
            $scope.closeLanguageModal = function() {
                $scope.languageModal.hide();
            };
            $scope.closeReligionModal = function() {
                $scope.religionModal.hide();   
            };

Modal View:

<div class="modal">
<header class="bar bar-header bar-positive">
    <h1 class="title">Select Language</h1>
</header>
<content has-header="true">
    <div class="list">
        <label class="item item-radio" ng-repeat="language in languages">
            <input type="radio" ng-model="searchCriteria.language" ng-value="language.id">
            <div class="item-content">
                {{language.name}}
            </div>
            <i class="radio-icon ion-checkmark"></i>
        </label>
        <div class="padding-horizontal">
            <button class="button button-block button-positive" ng-click="closeLangugeModal()">
                Done
            </button>
        </div>
    </div>
</content>

I’ve tried creating separate scopes for the modals but got the same result. I can’t seem to track down this the root cause. Any advice would be appreciated.

2

Have you considered just using one Modal with ng-if to controller what is shown? It might be a little lighter weight and easier to manage.

3

Thanks. I was able to get this working with ngif

4

Had the same question/issue and got it working using ng-if but for some reasons my modal doesnt have its slide-up animation anymore.

The markup:

<script id="modal.html" type="text/ng-template">
  <div class="modal" ng-if="modalType == 1">
     ...
  </div>
  <div class="modal" ng-if="modalType == 2">
    ...
  </div>
</script>

Any ideas why/how to “fix”?