I'm completely new to working with Ionic and AngularJS, and I've hit a roadblock when trying to implement a modal box that should open upon clicking on a checkbox or radio button in the settings page. Specifically, this issue occurs when selecting the third option for hashtag search. I've utilized ng-controller
and ng-click
to trigger the action, but it seems like there's an error popping up in the debugger:
GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]
The 404 Not Found error typically indicates that the templateUrl couldn't be located. However, all my navigation pages are successfully linked in the index.html except for hashtag-modal.html
within the app.js
file. Why is this happening and how can I resolve it?
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';
$scope.hashtag = function()
{
$scope.hashtagValue = 'blackandwhitephotography';
};
}]);
// 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();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
$scope.$on('modal.hidden', function() {
});
$scope.$on('modal.removed', function() {
});
});
index.html
<!-- SETTINGS --> <script id="settings.html" type="text/ng-template"> <ion-view title="Settings" hide-back-button="false"> <ion-content class="padding"> <!-- Remaining codes have been omitted for brevity --> <p><strong>Revised app.js</strong></p> <p>Incorporated <code>$ionicModal
into thehashtagController
, but encountered the error messageError: $ionicModal is undefined
. Any ideas where it might be undefined?// Hashtag Search option app.controller('hashtagController', ['$scope', function($scope, $ionicModal) { $scope.hashtagValue = 'Search'; $scope.hashtag = function() { $scope.hashtagValue = 'blackandwhitephotography'; $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(); }; $scope.$on('$destroy', function() { $scope.modal.remove(); }); } }]);
Revised label
<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> <span id="hashtagInput">{{hashtagValue}}</span> </div> <i class="radio-icon ion-checkmark"></i> </label>