我用離子編程一個倒計時應用程序，我不擅長AngularJS，因此，我不知道我做錯了什麼：也許你可以看看我的代碼，它應該有一個按鈕，開始倒計時，如果倒計時結束，會彈出一條消息。離子倒數計時器應用程序

timer.js

angular.module('PopupTimer', []) 

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

    $scope.showAlert = function() { 
    var alertPopup = $ionicPopup.alert({ 
     title: 'Your Pizza Is Ready!', 
     template: 'Bon Appétit!' 
    }); 

    alertPopup.then(function(res) { 
     console.log('Pizza Is Ready!'); 
    }); 
    }; 

    $scope.timerCountdown = function(res){ 
     var alertPopup = $ionicPopup.alert({ 
     title: 'Your Pizza Is Ready!', 
     template: 'Bon Appétit!'}); 

     var endtimer = $timeout([200]); 

     if(endtimer == ([0])) { 
     return showAlert(); 
     } 
    } 
});

app.js

// Ionic Starter App 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 
angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
     // for form inputs) 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

    // Don't remove this line unless you know what you are doing. It stops the viewport 
    // from snapping when text inputs are focused. Ionic handles this internally for 
    // a much nicer keyboard experience. 
    cordova.plugins.Keyboard.disableScroll(true); 
} 
if(window.StatusBar) { 
    StatusBar.styleDefault(); 
} 


}); 
})

的index.html

<!DOCTYPE html> 
<html ng-app="PopupTimer"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <title></title> 

    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
    <link href="css/style.css" rel="stylesheet"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.css" rel="stylesheet"> 
    --> 

    <!-- ionic/angularjs js --> 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 

    <!-- cordova script (this will be a 404 during development) --> 
    <script src="cordova.js"></script> 

    <!-- your app's js --> 
    <script src="js/app.js"></script> 
    <script src="js/timer.js"></script> 
    </head> 
    <body ng-app="starter"> 

    <ion-pane> 
     <ion-header-bar align-title="center" class="bar-assertive"> 
     <h1 class="title">Pizza Timer</h1> 
     </ion-header-bar> 
     <ion-content ng-controller="PopupCtrl"> 
     <button class="button button-full button-light" ng-click="timerCountdown"> 
      Alert 
     </button> 
     </ion-content>  
    </ion-pane> 
    </body> 
</html>

來源

2015-12-28 Julian Be

如果你看一下documentation of $timeout，你會發現它的第一個參數是一個函數，應該在指定的延遲之後調用。

延遲（第二個參數）以毫秒爲單位指定。因此，在5秒鐘後顯示一個警告，您的$sope.timerCountdown功能應該是這樣的：

$scope.timerCountdown = function(res){ 
    var endtimer = $timeout(
    function() { 
     var alertPopup = $ionicPopup.alert({ 
     title: 'Your Pizza Is Ready!', 
     template: 'Bon Appétit!'}); 
    }, 
    5000); 
};

來源

2015-12-28 20:45:51 M4N

但它仍然給我的錯誤和不要顯示的應用程式上（鏈接：http://i.imgur.com/68voVXv。 png） –

@JulianBe：不知道問題是什麼，它必須在應用程序的另一部分（不在timerCountdown中）。看看這個最簡單的例子：http：//play.ionic.io/app/57ca9c1973c5 - 也許你可以看到不同之處。 – M4N

謝謝，它的工作：D –

離子倒數計時器應用程序

timer.js

app.js

的index.html

回答

相關問題