First steps with ionic to get popup alert on butto

2019-04-12 11:48发布

问题:

I am trying to understand the concept how ionic framework works and how to use the controllers. More specifically, I am trying to add a button that would display a alert / popup to the slidebar example with some code from the documentation. Unfortunately no success. I am not sure how to debug the app because the ionic server is not consistent with the simulator. Is there a good tutorial (not the official page) out there? What is the best way to dig into it? I am moving to slow for my taste. I am familiar with ios coding by the way, and I sort of miss the comfortable ios environment...

Here's the code I wrote for the button alert click: in one of the html files

<button ng-click="showPopup()" class="button icon ion-edit"></button>

in controllers.js

.controller('PlaylistsCtrl',function($scope, $ionicPopup, $timeout) {

// Triggered on a button click, or some other target
$scope.showPopup = function() {
  $scope.data = {}

    // An alert dialog
    $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');
        });
    };
};
});

Fixed Thanks for the input. I'll try to fix it. I realized that it's not ionic but angularjs that I have to read upon, for which I now found a good book.Thanks

回答1:

As merlin said the showAlert() is not run when showPopup is called. Here is what the controller should look like

angular.module('ionicApp', ['ionic'])

.controller('PlaylistsCtrl', function($scope, $ionicPopup, $timeout) {
  $scope.data = {}

  // Triggered on a button click, or some other target
  $scope.showPopup = function() {
    var alertPopup = $ionicPopup.alert({
      title: 'Dont eat that!',
      template: 'It might taste good'
    });
    alertPopup.then(function(res) {
      console.log('Thank you for not eating my delicious ice cream cone');
    });
  };
});

Working example:

http://codepen.io/hannuraina/pen/qIbsE?editors=101