Question

我正在创建一个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');
   });
 };

});

单击按钮时，弹出窗口无法正常工作。我不知道错误在哪里。

Answer 1

尝试以下两项修改：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么离子弹出不起作用？

1 个答案: