How to open Ionic Modal after clicking?

Question

I am new to Ionic and AugularJS, and I had a problem opening a modal window when I click on the checkbox / switch on the third option to search for the hashtag on the settings page. I have included ng-controller and ng-click to take action. I looked in the debugger and it found an error:

GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]

I know that 404 Not Found means that he did not find templateUrl, but every navigation page I have is in index.html and they work fine except for hashtag-modal.html in the app.js file. Why does this not work and how can I solve this problem?

app.js

 // Navigation pages app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('index', { url: '/index', templateUrl: 'index.html' }) .state('about', { url: '/about', templateUrl: 'about.html' }) .state('settings', { url: '/settings', templateUrl: 'settings.html' }) .state('hashtag-modal', { url: '/hashtag-modal', templateUrl: 'hashtag-modal', controller: 'hashtag-modalCtrl' }) $urlRouterProvider.otherwise("/index"); // if no url found, go back to index }) // Hashtag Search option app.controller('hashtagController', ['$scope', function($scope) { $scope.hashtagValue = 'Search'; // default value $scope.hashtag = function() { $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value }; }]); // hashtag search modal app.controller('hashtag-modalCtrl', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('hashtag-modal.html', { scope: $scope, animation: 'slide-in-up', focusFirstInput: true }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; // Cleanup the modal when we're done with it! $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 }); }); 

index.html

 <!-- SETTINGS --> <script id="settings.html" type="text/ng-template"> <!-- The title of the ion-view will be shown on the navbar --> <ion-view title="Settings" hide-back-button="false"> <ion-content class="padding"> <!-- The content of the page --> <p>Check one of the options below to set how you wish to categorize and view your Instagram photos. </p> <div class="settings-list"> <label class="item item-radio"> <input type="radio" name="settings-group" value="recent"> <div class="item-content"> Recent </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio"> <input type="radio" name="settings-group" value="popular"> <div class="item-content"> Most Popular </div> <i class="radio-icon ion-checkmark"></i> </label> <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();"> <input type="radio" name="settings-group" value="search"> <div class="item-content"> <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span> </div> <i class="radio-icon ion-checkmark"></i> </label> </div> </ion-content> </ion-view> </script> <!-- HASHTAG SEARCH MODAL --> <script id="hashtag-modal.html" type="text/ng-template"> <ion-modal-view hide-back-button="false"> <ion-header-bar> <h1 class="title">Hashtag Search</h1> </ion-header-bar> <ion-content> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="search" placeholder="Search"> </label> </ion-content> </ion-modal-view> </script> 

---

Revised app.js

I added $ionicModal to hashtagController but it says Error: $ionicModal is undefined . Where else is this undefined?

 // Hashtag Search option app.controller('hashtagController', ['$scope', function($scope, $ionicModal) { $scope.hashtagValue = 'Search'; // default value $scope.hashtag = function() { $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value $ionicModal.fromTemplateUrl('hashtag-modal.html', { scope: $scope, animation: 'slide-in-up', focusFirstInput: true }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; // Cleanup the modal when we're done with it! $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 }); } }]); 

Revised Tag

 <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();"> <input type="radio" name="settings-group" value="search"> <div class="item-content"> <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span> </div> <i class="radio-icon ion-checkmark"></i> </label> 

Answer 1

the ion modal has nothing to do with routes.

You just download the static html template from the server, and the same html is shown in the ionic modal with all the bindings.

Instead of declaring a separate controller, move it inside the same controller:

 app.controller('hashtagController', ['$scope', function($scope, $ionicModal) { $scope.hashtag = function() { $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value $ionicModal.fromTemplateUrl('hashtag-modal.html', { scope: $scope, animation: 'slide-in-up', focusFirstInput: true }).then(function(modal) { $scope.modal = modal; $scope.modal.show(); }); }; $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; $scope.$on('$destroy', function() { $scope.modal.remove(); }); $scope.$on('modal.hidden', function() { // Execute action }); $scope.$on('modal.removed', function() { // Execute action }); } 

Then in your HTML:

  <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();"> <input type="radio" name="settings-group" value="search"> <div class="item-content"> <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span> </div> <i class="radio-icon ion-checkmark"></i> </label> 

Answer 2

Ionic has a good codepen example showing how to open modal with ng-click

http://codepen.io/ionic/pen/gblny