So I am trying to get popups to work with Ionic but I keep getting the following error.
Unknown provider: TemplateLoaderProvider <- TemplateLoader <- $ionicPopup
I don’t understand why. My entire app is based around the starter app template from Ionic. I have [‘ionic’] defined in my app.
my controller definition looks like this.
.controller('MainCtrl', function($scope, $ionicPopup, stateService, pointsFactory, taskFactory) {
Whats weird is that one of my other controllers uses $ionicModal fine.
controller('createAccountCtrl', function($scope, $ionicModal, $http, stateService, ENV) {
That works. Why is $ionicPopup failing?
sample code so someone can help you
.controller('openReviewCtrl', function($scope, $ionicPopup, pointsFactory, reviewFactory, $http, $stateParams, stateService, taskFactory) {
var state = stateService.getState();
var reviewData = {
name: "default",
text: "default",
rating_overall: "default"
};
$scope.task = {
task_id: state.task.id,
completed: state.task.completed,
worth: state.task.worth
};
$scope.writeReview = function(isValid) {
if (isValid){
reviewData = $scope.review;
reviewData.user_id = stateService.getUserId();
reviewData.business_id = stateService.getBusinessId();
reviewFactory.postReview(reviewData).$promise.then(
function(value) {
alert('Thank you for your submission.');
taskFactory.isTaskComplete({user_id: state.user.id , app_task_id: $scope.task.task_id}).$promise.then(
function(result) {
var isComplete = result['isComplete'];
if (isComplete === "true") {
alert("You have already earned points for this task");
} else {
pointsFactory.addPoints({ user_id:reviewData.user_id, app_task_id: $scope.task.task_id, worth: $scope.task.worth}).$promise.then(
function(result) {
alert("successfully added points");
$scope.task.completed = true;
console.log($scope.task.completed);
pointsFactory.getPoints({user_id:$scope.state.user.id}).$promise.then(
function(result) {
var points = result['points'];
stateService.setState('user', 'points', result['points']);
},
function(error) { console.log("error getting points"); }
);
},
function(error) { alert("error adding points") }
);
}
},
function(error) { console.log("error checking task"); }
);
$scope.reviewForm.$setPristine(true);
$scope.review = null;
},
function(error) { alert(error) }
);
} else {
$ionicPopup.alert({
title: 'Form error.',
content: 'The form is invalid.'
}).then(function(res) {
console.log('invalid form');
});
}
};
})
Thats my complete openReview controller that uses the ionicPopup to alert out when the form is invalid.
My app.js file defines Ionic
angular.module('starter', ['ionic', 'starter.services', 'starter.controllers', 'ngSanitize', 'LocalStorageModule', 'ngResource', 'config'], function($httpProvider){