CODEWITHSUNDEEP
ionic-framework
Simran Kaur
Simran Kaur

Reputation: 1101

ionic model show and hide not working

I have been following ionic framework documentation tried implementing ionic modal on a button click http://ionicframework.com/docs/api/service/$ionicModal. But does not work at all on button click.I have read almost every post and suggestion but it just would not work.

Can I please get some direction what could be going wrong here? modal.html:

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

controller:

.controller('HomeTabCtrl', function($scope, $ionicModal) {
  console.log('HomeTabCtrl');
 $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

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


})

I am calling it on a button click:

<ion-view view-title="Facts" ng-controller="HomeTabCtrl">
      <ion-content class="padding">
        <div class="buttons" ng-controller="HomeTabCtrl">
        <button class="button button-icon ion-compose" ng-click="openModal()">
        </button>
      </div>n

      </ion-content>
    </ion-view>

I have tried calling modal.show() instead of openModal() function but no help. Is there anything wrong with the code? How do I fix this?

Upvotes: 1

Views: 975

Answers (1)

craigvl
craigvl

Reputation: 380

I have the <ion-modal-view> tag and html wrapped in a script tag:

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

And then use the script id in the controller:

 $ionicModal.fromTemplateUrl('my-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
}).then(function (modal) {
    $scope.modal = modal;
});

Does this help?

Upvotes: 0

Related Questions