CODEWITHSUNDEEP
javascripthtmlangularjspopupmodal-dialog
TheGarrett
TheGarrett

Reputation: 311

Ionic modal won't open

I've recently tried creating an ionic modal. I started off by looking at multiple examples I have found on the internet but I can't get them working. Can someone tell me where I'm going wrong? Thanks in advance :)

Calling the modal: 

<button class="ion-ios-information-outline button button-clear" ng-click="openModal()"></button>

JS:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) {

  /* Modal */
$ionicModal.fromTemplateUrl('intro-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal
  })  

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

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

  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
};

The modal page:

<script id="intro-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="contact.name">
        </label>
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="contact.info">
        </label>
      </div>

      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
  </div>
</script>

Upvotes: 0

Views: 2506

Answers (2)

Eric Borland
Eric Borland

Reputation: 111

Try removing the 

<script id="my-modal.html" type="text/ng-template">

tag of your template, leave just the content inside the html template and as @wiherek said use a ion-modal-view.

So your my-modal.html template should end up like this:

<ion-modal-view>
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="contact.name">
        </label>
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="contact.info">
        </label>
      </div>
      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
  </ion-modal-view>

Upvotes: 0

wiherek
wiherek

Reputation: 1923

There are things you should check:

  1. is the controller instantiated? Is the function called from within the controller in the view? Can you call successfully call other functions? Try to add another button in there, with ng-click="test()" and in the controller add $scope.test = function () { console.log('it works'); }; and see if clicking the button has effect in the console.

  2. The other thing, the ionic modal docs http://ionicframework.com/docs/api/service/$ionicModal/

I think the modal page should be wrapped in a ion-modal-view container:

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="contact.name">
        </label>
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="contact.info">
        </label>
      </div>
      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
  </ion-modal-view>
</script>

Upvotes: 2

Related Questions