上的點擊按鈕離子

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

檢查。