0

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

});

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

4

1 回答 1

0

试试这两个修改：

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

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

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

于 2016-11-04T21:11:13.003 回答