Открыть оповещение по нажатию кнопки-Ионные

Question

Я новый ионному и старается открыть оповещение при щелчке button.Following фрагмент кода я использую:

<button class="button button-dark" ng-click="showAlert()">Sample Alert</button> 

в controller.js

.controller('PopupCtrl', function($scope, $timeout, $q, $ionicPopup) { 
    $scope.showAlert = 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'); 
     }); 
    }; 
}) 

Я прошел через: First steps with ionic to get popup alert on button tap/click, но ничего не помогло.Что я делаю неправильно?

Кроме того, она дает мне следующее сообщение об ошибке:

Error: $ionicPopup is not defined 
$scope.showAlert@http://localhost:8100/js/controllers.js:20:13 
$parseFunctionCall@http://localhost:8100/lib/ionic/js/ionic.bundle.js:21044:15 
@http://localhost:8100/lib/ionic/js/ionic.bundle.js:53458:9 
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8100/lib/ionic/js/ionic.bundle.js:23100:16 
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8100/lib/ionic/js/ionic.bundle.js:23199:18 
@http://localhost:8100/lib/ionic/js/ionic.bundle.js:53457:7 
createEventHandler/eventHandler@http://localhost:8100/lib/ionic/js/ionic.bundle.js:11713:9 
triggerMouseEvent@http://localhost:8100/lib/ionic/js/ionic.bundle.js:2863:3 
tapClick@http://localhost:8100/lib/ionic/js/ionic.bundle.js:2852:3 
tapMouseUp@http://localhost:8100/lib/ionic/js/ionic.bundle.js:2925:5 


return logFn.apply(console, args); 

Am Мне нужно было что-то под app.js?

Answer 1

Включенный вами ionic в качестве зависимости от основного модуля приложения? Вы указали ionic.bundle.js в свой index.html? Или вы загружаете angular и ionic отдельно? Если да, то попробуйте с ionic.bundle.js

Answer 2

Убедитесь, что следующие плагины:

• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova. диалоги

Также убедитесь, что вы включили в индекс следующее:

<link href="css/ionic.app.css" rel="stylesheet"> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 
<script src="cordova.js"></script> 

Answer 3

Это связано с тем, что вы не добавляли $ ionicPopup в зависимости от вашего контроллера. Попробуйте заменить контроллер с одним из следующих способов (предпочтительно сначала)

1.

.controller('PopupCtrl', popupCtrl); 

popupCtrl.$inject = ['$scope', '$timeout', '$q', '$ionicPopup']; 

var popupCtrl = function($scope, $timeout, $q, $ionicPopup) { 
    $scope.showAlert = 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'); 
     }); 
    }; 
} 

или

2.

.controller('PopupCtrl', ['$scope', '$timeout', '$q', '$ionicPopup', function($scope, $timeout, $q, $ionicPopup) { 
    $scope.showAlert = 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'); 
     }); 
    }; 
}]) 

я лично использовать первый синтаксис в моих проектах, и он работает для меня

Answer 4

вы можете проверить, если вы включили «ионным» в модуле приложения:

angular.module('surveyApp', ['ionic']) 

Answer 5

Проверьте, если вы используете ng-controller="PopupCtrl" в вашем HTML, где ваша кнопка расположена.