AngularJS 타이머 다시 인스턴스화

여러 카운트 다운 타이머를 추적하는 각도 앱을 개발 중입니다. 사용자가 드롭 다운에서 새 값을 선택할 때 타이머를 다시 인스턴스화해야합니다. 나는 새 값을 선택할 때 메소드 호출이 일어나고 있다는 것을 확인하기위한 경고를 가지고 있지만, 타이머가 어떻게 다시 초기화되는지를 알지 못한다. http://siddii.github.io/angular-timer/AngularJS 타이머 다시 인스턴스화

apps.js :

나는이 타이머를 사용하고

var app = angular.module('TestTimer', ['timer']); 
app.controller('OptionController', function() { 
    this.Options = [{name: 'name1',attr1: 10, attr2: 15, attr3: 8, attr4: 22},{name: 'name2',attr1: 45,attr2: 45, attr3: 15, attr4: 60 
}]; 
    this.selectedOption = {name: 'Selected Option',attr1: 30, attr2: 45, attr3: 15, attr4: 60}; 
    this.isSelectedOption = function(name) { 
     return this.selectedOption.name === name; 
    }; 
    this.getOptions = function() { 
     return this.Options; 
    }; 
    this.getSelectedOption = function() { 
     return this.selectedOption; 
    }; 
    this.setSelectedOption = function(Option) { 
     this.selectedOption = Option; 
    }; 

    this.selectedTemplate = function() { 
     alert(this.selectedOption.name); 
    }; 
}); 

function TimerController($scope) { 
    $scope.timerRunning = false; 

    $scope.startTimer = function(){ 
     $scope.$broadcast('timer-start'); 
     $scope.timerRunning = true; 
    }; 

    $scope.stopTimer = function(){ 
     $scope.$broadcast('timer-stop'); 
     $scope.timerRunning = false; 
    }; 

    $scope.resetTimer = function() { 
     $scope.$broadcast('timer-reset'); 
    } 

    $scope.$on('timer-stopped', function (event, data){ 
     console.log('Timer Stopped - data = ', data); 
    }); 

    $scope.$on('timer-tick', function(event, data) { 
     console.log('Timer ticked -', data); 
    }); 

    } 
    TimerController.$inject = ['$scope'];

HTML :

이

<body ng-app="TestTimer"> 

    <div ng-controller="OptionController as main"> 
     <h1>Test Timer</h1> 
     <h3> 
      <select ng-change='main.selectedTemplate()' ng-model="main.selectedOption" ng-class="form-control" ng-Options="Option.name for Option in main.Options" title="Options"> 
       <Option value="">Pick a Option</Option> 
      </select> 
     </h3> 
     <div ng-controller="TimerController as timer"> 
      <h3>attr1: <timer autostart="false" countdown="main.selectedOption.attr1" interval="1000" finish-callback="startTimer()">{{countdown}}</timer></h3> 
      <h3>attr2: <timer autostart="false" countdown="main.selectedOption.attr2" interval="1000" finish-callback="startTimer()">{{countdown}} 
      </timer></h3> 
      <h3>attr3: <timer autostart="false" countdown="main.selectedOption.attr3" interval="1000" finish-callback="startTimer()">{{countdown}}</timer></h3> 
      <h3>attr4 Launcher: <timer autostart="false" countdown="main.selectedOption.attr4" interval="1000" finish-callback="startTimer()">{{countdown}}</timer></h3> 
      <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button> 
      <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button> 
     </div> 
      attr-name: {{ main.selectedOption.name }} <br /> 
      attr1: {{ main.selectedOption.attr1 }} <br /> 
      attr2: {{ main.selectedOption.attr2 }} <br /> 
      attr3: {{ main.selectedOption.attr3 }} <br /> 
      attr4: {{ main.selectedOption.attr4 }} <br /> 
    </div> 
</body>

편집 : plunkr이 - http://plnkr.co/edit/TADnlLBdpDI0mxJuq23A?p=preview

출처

2015-02-04 Andrew Campbell

내가 각 타이머 지시어의 사용자 정의 구현을했다. 제발 [여기보세요] (http://stackoverflow.com/questions/26450240/does-angularjs-help-out-in-any-way-when-it-comes-to-have-a-duration-counter-on- m) 및 [여기] (http://stackoverflow.com/questions/26775808/angular-timer-directive-not-working-with-ionic-framework) 각도 타이머는 jquery 기반, 따라서 나는 그것을 좋아하지 않는다. 많은 – harishr

에 내장 된 기능이 있습니다 이 프레임 워크는 내가 생각하지 않은 타이머를 리셋하지 않았습니다. 정확하게 mpiling하지만, 몇 가지 범위가 문제가 있음이 밝혀졌습니다.

$ compile으로 어지러운 시간을 보냈다. 마침내 resetTimer 메소드가 내가 필요한 것을 정확히 수행한다는 것을 알게되었다.

app.js :

 var app = angular.module('TestTimer', ['timer']); 
     app.controller('OptionController', function() { 
      this.Options = [{name: 'name1',attr1: 60, attr2: 60, attr3: 60, attr4: 60},{name: 'name2',attr1: 45,attr2: 45, attr3: 15, attr4: 60 
     }]; 
      this.selectedOption = {name: 'Selected Option',attr1: 30, attr2: 45, attr3: 15, attr4: 60}; 

      this.getOptions = function() { 
       return this.Options; 
      }; 
      this.getSelectedOption = function() { 
       return this.selectedOption; 
      }; 
     }); 

     function TimerController($scope) { 
      $scope.timerRunning = false; 

      $scope.startTimer = function(){ 
       $scope.$broadcast('timer-start'); 
       $scope.timerRunning = true; 
      }; 

      $scope.stopTimer = function(){ 
       $scope.$broadcast('timer-stop'); 
       $scope.timerRunning = false; 
      }; 

      $scope.resetTimer = function() { 
       $scope.$broadcast('timer-reset'); 
      }; 

      $scope.$on('timer-stopped', function (event, data){ 
       console.log('Timer Stopped - data = ', data); 
      }); 
      } 

      TimerController.$inject = ['$scope'];

HTML :

<body> 
<div ng-app="TestTimer"> 
    <div ng-controller="OptionController as main"> 
     <h1>Test Timer</h1> 
     <div ng-controller="TimerController as timer"> 
      <select ng-model="main.selectedOption" ng-class="form-control" ng-click="resetTimer()" ng-options="Option.name for Option in main.getOptions()"> 
       <Option value="">Pick a Option</Option> 
      </select> 
      <br /> 
      attr1: <timer autostart="false" countdown="main.getSelectedOption().attr1 + 1" interval="1300" finish-callback="startTimer()">{{countdown}}</timer><br/> 
      attr2: <timer autostart="false" countdown="main.getSelectedOption().attr2 + 1" interval="1300" finish-callback="startTimer()">{{countdown}}</timer><br/> 
      attr3: <timer autostart="false" countdown="main.getSelectedOption().attr3 + 1" interval="1300" finish-callback="startTimer()">{{countdown}}</timer><br/> 
      attr4: <timer autostart="false" countdown="main.getSelectedOption().attr4 + 1" interval="1300" finish-callback="startTimer()">{{countdown}}</timer><br/> 
      <button ng-click="startTimer()" ng-disabled="timerRunning" ng-init="resetTimer()">Start Timer</button> 
      <button ng-click="stopTimer()" ng-disabled="!timerRunning" >Stop Timer</button> 
      <button ng-click="resetTimer()" ng-disabled="timerRunning">Reset Timer</button> 
     </div> 
    </div> 
</div> 
</body>

출처

2015-02-08 20:35:36

AngularJS 타이머 다시 인스턴스화

답변

관련 문제