Question

我是离子的新手，在点击按钮时努力打开警报。以下是我正在使用的代码段：

<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

这是因为您没有在控制器依赖项中添加$ 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 2

您是否在应用的主模块中添加了ionic作为依赖项？您是否在index.html中添加了ionic.bundle.js？或者您是单独加载angular和ionic？如果是，请尝试使用ionic.bundle.js

Answer 3

确保您拥有以下插件：

org.apache.cordova.console
org.apache.cordova.device
org.apache.cordova.dialogs

另外，请确保在索引中包含以下内容：

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

Answer 4

你可能想检查一下你是否已经包含了离子＆＃39;在您的应用模块中：

.\Hello.go:7: syntax error: unexpected :=, expecting )
.\Hello.go:11: syntax error: unexpected }

Answer 5

检查您的HTML中是否使用ng-controller="PopupCtrl"放置按钮。

单击按钮 - 离子时打开警报

5 个答案: