Ionic alertbox issue

ionic-v1
1

i m trying to create alert box on button click with OK button,

$scope.showAlert = function() {
$ionicPopup.alert({
title: ‘Success!’,
content: ‘Hello World!!!’
}).then(function(res) {
console.log(‘Test Alert Box’);
});
};

but in console i m getting error

Uncaught ReferenceError: $ionicPopup is not defined

2

u must define it in the controller function

function($scope, $ionicPopup) {
1 Like
3

@maleeb : Thanks for the reply, i added $ionicPopup in my controller function but now i m getting another error

Error: [$injector:unpr] Unknown provider: TemplateLoaderProvider ← TemplateLoader ← $ionicPopup

4

Have you tried reviewing the demo code:

If that doesn’t help. it will be easier for us to help if you put up a CodePen sample.

5

@Calendee: Thanks for the reply, yeah i referred same example but in this the included js and css is different so this same example ll not work for me as i m using separate js for all.but in this example they created bundle of some js like…

ionic.bundle.js is a concatenation of:
ionic.js, angular.js, angular-animate.js,
angular-ui-router.js, and ionic-angular.js

6

@nik have you found a solution for that?

7

You can manually include all the JS libraries required:

    <script src="/js/ionic/ionic.js"></script>
    <script src="/js/angular/angular.min.js"></script>
    <script src="/js/angular/angular-animate.min.js"></script>
    <script src="/js/angular/angular-sanitize.min.js"></script>
    <script src="/js/lib/angular-ui-router.min.js"></script>
    <script src="/js/ionic/ionic-angular.js"></script>
8

There seams also to be a bug in ionic-angular.j Line 539. There should not be a dependency to TemplateLoader because it doesn’t exist. Should i maybe be ionicTemplateLoader?

This will fix this error:

Error: [$injector:unpr] Unknown provider: TemplateLoaderProvider <- TemplateLoader <- $ionicPopup
9

You mind opening a new thread and showing an CodePen sample of how you are getting this error?

10

I just recreated the “unkown provider TemplateLoader” issue. The thing is that for me it’s really hard to create a CodePen, since for some reason it only happens if I lazy-load my app (https://github.com/ocombe/ocLazyLoad). The ionic bundle script is “hard-coded” into index.html in both cases.

patrickdu solved it for me. Replacing 'TemplateLoader' for '$ionicTemplateLoader' in:

angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
.factory('$ionicPopup', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {

to

angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
.factory('$ionicPopup', ['$rootScope', '$document', '$compile', '$ionicTemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {

Fixes the issue.

edit: I just updated ionic to 1.0.0-beta.4 and it’s fixed, no need to “fix” that line.

11

I’m still having the same issue here:

angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) { state provider and url route provider... }
.controller('SignInCtrl', function($scope, $state, $ionicPopup) { some code to display popups... }

But this way I’m getting: Error: [$injector:unpr] http://errors.angularjs.org/1.2.12/$injector/unpr?p0=TemplateLoaderProvider%20<-%20TemplateLoader%20<-%20%24ionicPopup

And if I remove $ionicPopup from definition of the functions I’m getting that it’s undefined.

I’m using ionic.bundle.min.js picked up from your official github repo. What am I doing wrong?

12

I was having the same problem(s) until I declared dependencies for that controller, e.g.:

.controller('FormCtrl', ['$scope','$ionicPopup', function ($scope, $ionicPopup) {

That fixed any problems I had with the pop-up!

13


the alert not displayed y?
if change this line var app = angular.module(“myApp”, [“ngRoute”]); into var app = angular.module(“myApp”, [“ionic”]);,alert displayed
but i want ngRoute also.please help