[SOLVE] Modal can have only one in index.html with one controller

ionic-v1
1

I try to have multiple modal template in index.html cause whole application hang ( freeze )

After i test i found when i put controller for handle business logic it cause browser freeze ( it try to load AngularJS code ) while angular script error random line ( as i show below line 58 some time line 5328 e.g. )

My sample code

modal1

 <script id="modal2.html" type="text/ng-template">
        <div class="modal">
          <header class="bar bar-header bar-positive">
            <h1 class="title">test1</h1>
            <button class="button button-clear" ng-click="closeModal()">close</button>
          </header>
            <content has header="true" padding="true">
            <button class="button button-clear button-dark" ng-controller="Test1Controller " >
                 test1 
              </button>    
            </content>
        </div> 
    </script>

modal2

<script id="modal2.html" type="text/ng-template">
    <div class="modal">
      <header class="bar bar-header bar-positive">
        <h1 class="title">test1</h1>
        <button class="button button-clear" ng-click="closeModal()">close</button>
      </header>
        <content has header="true" padding="true">
        <button class="button button-clear button-dark" ng-controller="Test2Controller " >
             test1 
          </button>    
        </content>
    </div> 
</script>

controller

.controller('Test1Modal', function($scope, $ionicModal) {

  // Load the modal from the given template URL
  $ionicModal.fromTemplateUrl('modal1.html', function(modal) {
    $scope.modal = modal;
  }, {
    // Use our scope for the scope of the modal to keep it simple
    scope: $scope,
    // The animation we want to use for the modal entrance
    animation: 'slide-in-up'
  })

  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
})

Modal2 Controller2

.controller('Test2Modal', function($scope, $ionicModal) {
    
      // Load the modal from the given template URL
      $ionicModal.fromTemplateUrl('modal2.html', function(modal) {
        $scope.modal = modal;
      }, {
        // Use our scope for the scope of the modal to keep it simple
        scope: $scope,
        // The animation we want to use for the modal entrance
        animation: 'slide-in-up'
      })
    
      $scope.openModal = function() {
        $scope.modal.show();
      };
      $scope.closeModal = function() {
        $scope.modal.hide();
      };
    })
2

Ok , I found what going wrong. So Modal Controller can have only 1 but in one controller can have many modal. :slight_smile:

#close

3

I’m running into the same challenge, do you have an example of how you solved this issue with using multiple modals in Ionic?
Tnx, D

4

I am having the same freeze issue with popovers:

    $ionicPopover.fromTemplateUrl('templates/travel_mode-popover.html', {
        scope: $scope
    }).then(function (popover) {
        $scope.popover = popover;
    });

   $ionicPopover.fromTemplateUrl('templates/favorites-popover.html', {
        scope: $scope
    }).then(function (popover) {
        $scope.favPopover = popover;
    });