2016-11-04 1 views
0

Ich erstelle eine AngularJS + Ionic-App und versuche, eine Popup-Meldung anzuzeigen, wenn der Benutzer auf eine Schaltfläche klickt.Warum funktioniert das ionische Popup nicht?

Dies ist die 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> 

und dies ist der Controller. Ich habe keine echten Daten eingegeben.

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'); 
    }); 
}; 

}); 

Wenn ich auf die Schaltfläche klicke, funktioniert das Popup nicht. Ich weiß nicht, wo der Fehler ist.

+0

Es scheint, hier zu arbeiten in [codepen] (http://codepen.io/anon/pen/PboXPJ) –

+0

erhalten Sie einen Fehler in der Konsole? –

Antwort

0

Versuchen dieser beiden Modifikationen:

  1. Aktualisieren des ng-app Attribut des Body-Tages dh starter.controllers
  2. Erfordern den ionischen Rahmen auf dem Winkelmodul, das Modul entsprechen dh: angular.module('starter.controllers', ['ionic'])

Siehe das Beispiel unten (Ich habe das body Tag zu einemgeändert, weil body Tags in SO-Beispielen (derzeit) nicht zulässig sind.

//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>