Angular JSアプリケーション用に10秒タイマーを作成

Question

Angular JSのクイズアプリケーションに取り組んでいました。クイズアップアプリケーションのように、質問から構成されたタイムクイズがあります。私は質問に答えることができ、最後に結果を出すことができるクイズのアプリケーションを作ったが、自分の質問ごとにどのようにタイマーを導入できるのかという問題に悩まされていますか？別の指令やコントローラを作る必要がありますか？問題は、タイマーが遅延を作成する$タイムアウト関数を必要とするが、それは私のアプリケーション全体で遅延を作り出すことである。どんな助け？

注：私はAngular JSの初心者です。

app.js：

var app = angular.module('TheQuiz',[]); 

app.controller('QuizControl',['$scope','$http','$sce','$timeout',function($scope,$http,$sce,$timeout){ 

    $scope.score = 0; 
    $scope.presentQues = -1; 
    $scope.presentQuesAnswered = 0; 
    $scope.percent = 0; 
    $scope.playername = $scope.playername; 
    $scope.myself = false; 

    $http.get('getdata.php').then(function(qData){ 
     $scope.Questions = qData.data; 
     $scope.fullQuestions = $scope.Questions.length; 
    }); 

    $scope.startQuiz = function(){ 
     if ($scope.playername.length){ 
      $scope.presentQues = 0; 
     } 
    } 

    $scope.restart = function(){ 

     $scope.score = 0; 
     $scope.presentQues = -1; 
     $scope.presentQuesAnswered = 0; 
     $scope.percent = 0; 
     $scope.playername = ""; 
     $http.get('getdata.php').then(function(qData){ 
     $scope.Questions = qData.data; 
     $scope.fullQuestions = $scope.Questions.length; 

    }); 

    } 

    $scope.selectAns = function(pIndex , rIndex){ 

     var quesState = $scope.Questions[pIndex].quesState; 

     if (quesState != 'answered'){ 

      $scope.Questions[pIndex].selectedAns = rIndex; 
      var rightAns = $scope.Questions[pIndex].correct; 
      $scope.Questions[pIndex].rightAns = rightAns; 

      if (rIndex === rightAns){ 
       $scope.Questions[pIndex].correctness = 'correct'; 
       $scope.score += 1; 
      } 

      else { 
       $scope.Questions[pIndex].correctness = 'incorrect'; 
      } 

      $scope.Questions[pIndex].quesState = "answered"; 
     } 

     $scope.percentage = (($scope.score/$scope.fullQuestions) * 100).toFixed(2); 

    } 

    $scope.yesselected = function(pIndex , rIndex){ 
     return $scope.Questions[pIndex].selectedAns === rIndex; 
    } 

    $scope.yescorrect = function(pIndex , rIndex){ 
     return $scope.Questions[pIndex].rightAns === rIndex; 
    } 

    $scope.Continue = function(){ 
     return $scope.presentQues += 1; 
    } 

    $scope.Pass = function(){ 
      return $scope.presentQues += 1; 
    } 

}]); 

Answer 1

あなたの最善の策JavaScriptで時間を扱うmoment.jsライブラリを使用することです。人生はずっと楽になります。

私はAngular 1.5.xを使用してこれを作成し、コンポーネントを使用しました。

ここにはworking versionへのリンクがあります。

使いやすさのためにコンポーネントに2つのプロパティを追加しましたが、必要に応じてこれをユーザーから隠すことができます。量と単位を設定するだけです。 10時間のカウントダウンの場合は、単にcmp-10をcmp-単位に設定します。これらの値はadd()メソッドを使用してmoment()ライブラリのformat()メソッドを模倣しています。

また、親のコントローラにタイマーの終了を通知できるように、onEndメソッドを追加しました。

これはデモ目的のためのものであり、理想的には、これは生産のためのより機能的なプログラミングアプローチに従うべきです。

使用法：

<cmp-timer 
    cmp-from="10" 
    cmp-unit="second" 
    cmp-on-end="$ctrl.doSomething()"> 
</cmp-timer> 

コンポーネント：

angular 
    .module('app', []) 
    .component('cmpTimer', { 
    bindings: { 
     cmpFrom: '<', 
     cmpUnit: '@', 
     cmpOnEnd: '&' 
    }, 
    template: '<div class="timer">{{$ctrl.timeRemaining}}</div>', 
    controller: function ($interval) { 
     var vm = this, ONE_SECOND = 1000, timerInterval; 

     function startTimer() { 
     var END_TIME = vm.getEndTime(); 

     function update() {  
      vm.timeRemaining = moment((moment(END_TIME) - moment())).format("HH:mm:ss"); 
     } 

     timerInterval = $interval(function() { 
      if (moment() > moment(END_TIME)) return vm.stopTimer(); 

      update(); 
     }, ONE_SECOND); 

     update(); 
     } 

     vm.getEndTime = function() { 
     return moment().add(vm.cmpFrom, vm.cmpUnit); 
     } 

     vm.stopTimer = function() { 
     alert('Time\'s up!'); 

     vm.cmpOnEnd(); 

     vm.$onDestroy(); 
     } 

     vm.$onDestroy = function() { 
     $interval.cancel(timerInterval); 
     } 

     vm.$onInit = startTimer; 
    } 
    }); 

私が推薦するアプローチは、外コントローラ/ビューを持っており、いつでもあなたの準備ができて、CMP-タイマーを表示または非表示にngIfを使用することですそうするために。

Answer 2

あなたは、この目的のためにカスタムディレクティブを作ることができるか、このリンクに

https://siddii.github.io/angular-timer/