0

I am working on an angular app that keeps track of multiple countdown timers. I need the timers to be re-instantiated when a user selects a new value from the dropdown. I have an alert in place to confirm that the method call is happening upon selecting a new value, but I do not know how to ensure the timer is re-instantiated.

I am using this timer: http://siddii.github.io/angular-timer/

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>

EDIT: plunkr - http://plnkr.co/edit/TADnlLBdpDI0mxJuq23A?p=preview

1
  • i did have custom implementation of angular-timer directive. please look here, and here bascially the angular-timer is jquery based, hence i dont like it much
    – harishr
    Feb 9, 2015 at 12:17

1 Answer 1

2

There is a functionality built into this framework to reset the timer that I thought wasn't recompiling correctly, but it turns out that I just had some scoping issues.

After hours of messing around with $compile, I finally found out that the resetTimer method does exactly what I need.

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.