$ionicModal not firing

Question

$ionicModal not firing

I want to open up a modal in one of my html views. I am building an ionic app but it is not firing

new_referral.html

<ion-view view-title="New Referral">
    <ion-nav-bar class="bar-stable">
    <ion-nav-buttons side="left">
        <button class="button button-small">Cancel</button>
    </ion-nav-buttons>  
  </ion-nav-bar>
  <ion-content>
    <div class="row">
      <label class="button button-energized" ng-click="addImage()">
        Add image
      </label><br><br>
        <ion-scroll>
          <img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" ng-click="showImages($index)" class="image-list-thumb" height="50px"/>
        </ion-scroll>
    </div>
 </ion-content>
</ion-view>
<script id="my-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>

in my controller.js

.controller('MainCtrl', function($scope, $ionicModal) {
 $scope.addImage = function() {

    console.log("add image");
    $ionicModal.fromTemplateUrl('my-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();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
      // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
      // Execute action
    });
}

app.js config

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
  $stateProvider

.state('login', {
    url: "/login",
    //abstract: true,
    templateUrl: "templates/login.html",
    controller: 'AppCtrl'
  })

.state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'MainCtrl'
  })

.state('app.new', {
    url: "/new_referral",
    views: {
      'menuContent': {
        templateUrl: "templates/new_referral.html"
      }
    }
  })

$urlRouterProvider.otherwise('/login');

});

Must my modal script be in index.html file? cant it be in another file and i call it from there? Any help is appreciated. I just need the modal to open upon button click addImage()

javascript
angularjs
ionic-framework

Answer 1

as @DanielSchott says, you need to call your function openModal to send the order to show it.

At the end of $scope.addImage add $scope.modal.show()

Or simply do the following :

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

}

Answer 2

You needed to call : $scope.modal.show(); in order for the modal to appear

try it like this:

<label class="button button-energized" ng-click="addImage($event)">
    Add image
  </label>


$scope.addImage = function($event) {

console.log("add image");
$ionicModal.fromTemplateUrl('my-modal.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  $scope.modal.show($event);
});

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

$scope.$on('$destroy', function() {
  $scope.modal.remove();
});
// Execute action on hide modal
$scope.$on('modal.hidden', function() {
  // Execute action
});
// Execute action on remove modal
$scope.$on('modal.removed', function() {
  // Execute action
});

}