Why is the ionic popup not working?

Question

I am creating an AngularJS + Ionic app, and am trying to show a popup message when the user clicks on a button.

This is the index.html:

      <body ng-app="starter">
      <ion-content ng-controller="HomeCtrl">
      <button class="button button-block button-positive" ng-click="showpop()">
       <i class="icon ion-ionic"></i>
</ion-content>

      </body>

and this is the controller. I didn't put in real data.

angular.module('starter.controllers', [])
.controller('HomeCtrl', function($scope, $ionicPopup , $timeout) {

  $scope.showpop = function() {
   var alertPopup = $ionicPopup.alert({
     title: 'Don\'t eat that!',
     template: 'It might taste good'
   });

   alertPopup.then(function(res) {
     console.log('Thank you for not eating my delicious ice cream cone');
   });
 };

});

When I click the button, the popup is not working. I don't know where the mistake is.

It seems working here in [codepen](http://codepen.io/anon/pen/PboXPJ) — Pankaj Parkar, Nov 04 '16 at 19:34

Sᴀᴍ Onᴇᴌᴀ · Answer 1 · 2016-11-05T02:44:47.467

Try these two modifications:

Update the ng-app attribute of the body tag to match the module i.e. starter.controllers
Require the ionic framework on the angular module i.e.: angular.module('starter.controllers', ['ionic'])

See the example below (I changed the body tag to a div, because body tags are (currently) not allowed in SO samples).

//require the ionic module 
angular.module('starter.controllers', ['ionic'])
  .controller('HomeCtrl', function($scope, $ionicPopup, $timeout) {

    $scope.showpop = function() {
      var alertPopup = $ionicPopup.alert({
        title: 'Don\'t eat that!',
        template: 'It might taste good'
      });

      alertPopup.then(function(res) {
        console.log('Thank you for not eating my delicious ice cream cone');
      });
    };

  });

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- update the ng-app here to match the module name in the javascript code-->
<div ng-app="starter.controllers">
  <ion-content ng-controller="HomeCtrl">
    <button class="button button-block button-positive" ng-click="showpop()">
      <i class="icon ion-ionic"></i>
  </ion-content>

</div>

Why is the ionic popup not working?

1 Answers1