重新实例化 AngularJS 定时器

Question

我正在开发一个 angular 应用程序来跟踪多个倒数计时器。当用户从下拉列表中选择一个新值时，我需要重新实例化计时器。我有一个警报以确认在选择新值时正在发生方法调用，但我不知道如何确保重新实例化计时器。

我正在使用这个计时器：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>

编辑：plunkr - http://plnkr.co/edit/TADnlLBdpDI0mxJuq23A?p=preview

Answer 1

这个框架内置了一个功能来重置我认为没有正确重新编译的计时器，但事实证明我只是遇到了一些范围界定问题。

经过数小时的 $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>

重新实例化 AngularJS 定时器

Re-instantiate AngularJS Timer

javascript

timer

angularjs