为什么离子弹窗不起作用

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

当我点击按钮，弹出不工作。我不知道错在哪里

尝试以下两种修改:

更新body标签的ng-app属性以匹配模块即starter.controllers
在angular模块中要求使用ionic框架即:angular.module('starter.controllers', ['ionic'])

请参阅下面的示例(我将body标记更改为div，因为body标记(目前)不允许在SO示例中使用)。

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

相关内容

最新更新

热门标签：