为什么离子弹出窗口不起作用？答案

【问题标题】：Why is the ionic popup not working?为什么离子弹出窗口不起作用？
【发布时间】：2016-11-04 19:24:51
【问题描述】：

我正在创建一个 AngularJS + Ionic 应用程序，并试图在用户单击按钮时显示弹出消息。

这是 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>

这是控制器。我没有输入真实数据。

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

});

当我单击按钮时，弹出窗口不起作用。不知道错在哪里。

【问题讨论】：

它似乎在codepen这里工作
控制台是否出现任何错误？

标签： angularjs ionic-framework ionic-popup

【解决方案1】：

试试这两个修改：

更新body标签的ng-app属性以匹配模块即starter.controllers
在角度模块上需要 ionic 框架即：angular.module('starter.controllers', ['ionic'])

请参见下面的示例（我将 body 标记更改为 div，因为在 SO 示例中（当前）不允许使用 body 标记）。

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

【讨论】：