Javascript 重新实例化AngularJS计时器

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

我正在使用这个计时器：

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:

测试计时器
选择一个选项
属性1:{{倒计时}
属性2:{{倒计时}
属性3:{{倒计时}
attr4启动器：{{倒计时}
启动计时器
停止定时器
属性名称：{{main.selectedOption.name}}

属性1:{{main.selectedOption.attr1}}

属性2:{{main.selectedOption.attr2}}

属性3:{{main.selectedOption.attr3}}

属性4:{{main.selectedOption.attr4}}

---

编辑：plunkr-

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

在花费数小时处理$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:

测试计时器
选择一个选项


属性1:{{倒计时}}

属性2:{{倒计时}}

属性3:{{倒计时}}

属性4:{{倒计时}}

启动计时器
停止定时器
重置计时器

我有角度计时器指令的自定义实现。拜托，基本上角度计时器是基于jquery的，因此我不太喜欢它

        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'];

<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>