上的点击按钮离子

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

我是否需要在app.js的东西吗？

Answer 1

您是否在应用程序的主模块中包含ionic作为依赖项？ 您是否在您的index.html中包含ionic.bundle.js？或者你是单独加载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

如果所包含您的应用程序模块中的“离子”你可能要检查

：如果你在你的HTML中使用ng-controller="PopupCtrl"在您的按钮放置在

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

Answer 5

检查。