角定时器指令不使用离子框架。

I am having issues with implementing the angular timer directive with the ionic framework. http://siddii.github.io/angular-timer/

我在用离子框架实现角定时器指令时遇到了问题。http://siddii.github.io/angular-timer/

When I implement the code using bower or the google cdn I have no issues.

当我使用bower或谷歌cdn实现代码时，我没有问题。

    <!DOCTYPE html>
    <html>
    <head>
    <title>Plain Javascript Timer Example</title>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../app/js/timer.js"></script>
    <script>
    function startTimer() {
    document.getElementsByTagName('timer')[0].start();
    }
    function stopTimer() {
    document.getElementsByTagName('timer')[0].stop();
    }
    </script>
    </head>
    <body>
    <div>
    <h2>Plain JavaScript - Timer Example</h2>
    <h3><timer ng-app="timer"/></h3>
    <button onclick="startTimer()">Start Timer</button>
    <button onclick="stopTimer()">Stop Timer</button>
    </div>
    <br/>
    </body>
    </html>

However when I use the ionic bundle http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js I can not get the timer to work. And do not seem to get any errors in the console.

但是，当我使用ionic bundle http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js时，我无法让计时器工作。并且在控制台没有任何错误。

Is this a known issue?

这是一个已知的问题吗?

What would be stopping it from working?

什么会阻止它工作?

Is there an alternate timer that people can reccomend? This one seemed the best to me?

有没有可供人们重新使用的计时器?这个对我来说是最好的吗?

5 个解决方案

#1

try looking at this code sample here: http://siddii.github.io/angular-timer/examples.html#/angularjs-single-timer

尝试在这里查看这个代码示例:http://siddii.github.io/angular-timer/examples.html#/angularjs-single-timer

starting the timer in angular is done via

从角度开始计时是通过。

$scope.$broadcast('timer-stop');

not

不

element.start();

BTW, your ng-app should be in the html/body tag, not in the timer tag.

顺便说一句，你的ng应用应该在html/body标签中，而不是在timer标签中。

#2

here's angular way: http://plnkr.co/edit/ug4VqTkkFWlsYLy7uq4O

这是角方式:http://plnkr.co/edit/ug4VqTkkFWlsYLy7uq4O

also use $broadcast events for control this directive

还可以使用$broadcast事件来控制这个指令

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

#3

as per the discussion in comments, I am sharing the implementation of basic directive that I am using. This is not as generic as angular-timer, so you might need to tweak the little to suit your need.

根据评论中的讨论，我正在分享我正在使用的基本指令的实现。这并不像angular-timer那样通用，所以您可能需要调整一下，以满足您的需要。

first part : factory to hold the timer, start/stop, etc etc

第一部分:工厂保持定时器，启动/停止，等等。

csapp.factory("timerfactory", function () {
    var refresh = {
        suspend: false,
        pause: function () { refresh.suspend = true; },
        cont: function () { refresh.suspend = false; },
        toggle: function () { refresh.suspend = !refresh.suspend; },
        refreshText: function () { return refresh.suspend ? "Resume Refresh" : "Pause Refresh"; }
    };

    var timer = {
        timePending: 0,
        refreshInterval: 60,
        reset: function () { timer.timePending = timer.refreshInterval; },
        update: function () {
            if (timer.timePending < 0) timer.reset();
            timer.timePending--;
        },
        done: function () { return timer.timePending <= 0; },
        force: function () { timer.timePending = 0; }
    };

    return {
        refresh: refresh,
        timer: timer
    };
});

second part : the directive, which supports 2 operations

第二部分:指令，支持2个操作

boolean pause variable with 2 way binding

布尔暂停变量具有2路绑定
on-timeout function : which will be called on timeout

on-timeout函数:在超时时调用

interval : in seconds, after which the on-timeout function would be called

间隔:以秒为单位，然后调用on-timeout函数。

csapp.directive("csAutoRefresh", ["timerfactory", "Logger", "$interval", function (factory, logManager, $interval) {

csapp。指令(“csAutoRefresh”，["timerfactory"， "Logger"， "$interval"，函数(factory, logManager， $interval)

var $log = logManager.getInstance('csAutoRefresh');

var templateFn = function () {
    var template = '<div class="text-left alert alert-success nopadding"';
    template += 'style="margin-bottom: 0; margin-right: 0"> ';
    template += ' <button class="btn btn-link" data-ng-click="factory.refresh.toggle()">';
    template += '{{factory.refresh.refreshText()}}</button>';
    template += '<span>...Refreshing upload status in ';
    template += ' {{factory.timer.timePending}} seconds</span>';
    template += ' </div>';
    return template;
};

var linkFn = function (scope) {
    scope.pauseOn = false;
    scope.isprocessing = false;
    scope.factory = factory;
    if (angular.isDefined(scope.interval) && collosys.isNumber(parseInt(scope.interval)) && parseInt(scope.interval) > 0) {
        scope.factory.timer.refreshInterval = scope.interval;
    }
    factory.timer.reset();

    scope.$watch(function () {
        return factory.timer.timePending;
    }, function () {
        if (!factory.timer.done()) return;
        var result = scope.$eval(scope.onTimeout);
        if (angular.isObject(result) && angular.isFunction(result.then)) {
            scope.isprocessing = false;
            factory.timer.reset();
            result.finally(function () {
                factory.timer.reset();
            });
        };
    });

    scope.$watch('pauseOn', function () {
        if (scope.pauseOn) {
            factory.refresh.pause();
        } else {
            factory.timer.reset();
            factory.refresh.cont();
        }
    });

    var updateTimer = function () {
        if (scope.isprocessing) return;
        if (factory.refresh.suspend) return;
        factory.timer.update();
    };

    var interval = $interval(updateTimer, 1000);
    scope.$on('$destroy', function () {
        $interval.cancel(interval);
    });
};

return {
    restrict: 'E',
    scope: { onTimeout: '&', pauseOn: '=', interval: '@' },
    template: templateFn,
    link: linkFn,
 };
}]);

#4

I decided to not user the angular-timer directive as I was having issues with it reseting when ever I would change tabs as you can see from this example here.

我决定不使用angular-timer指令，因为我在使用它时遇到了问题，当我需要修改标签时，正如您在这里看到的。

Instead I based my timer of this fiddle.

取而代之的是我的定时器。

You can see my final result in this pen. Which loads a timer in ionic, and maintains counting even whilst changing tabs. Going forward, would probably want to add some more changes to it such as can only click stop when the timer has started etc.

你可以在这支笔里看到我的最终结果。在ionic中加载计时器，并在更改制表符时保持计数。接下来，可能还需要添加一些更改，比如只能在计时器启动时单击stop等。

        <script id="home.html" type="text/ng-template">
          <ion-view title="Home">
            <ion-content class="padding">
              <p>Home page</p>
                <h1>{{myStopwatch.data.hours | numberFixedLen:2}}:{{myStopwatch.data.minutes | numberFixedLen:2}}:{{myStopwatch.data.seconds | numberFixedLen:2}}</h1>
                <button ng-click='myStopwatch.start()'>Start</button>
                <button ng-click='myStopwatch.stop()'>Stop</button>
                <button ng-click='myStopwatch.reset()'>Reset</button>          
            </ion-content>
          </ion-view> 
        </script>

    <script>
    .filter('numberFixedLen', function () {
        return function (n, len) {
            var num = parseInt(n, 10);
            len = parseInt(len, 10);
            if (isNaN(num) || isNaN(len)) {
                return n;
            }
            num = ''+num;
            while (num.length < len) {
                num = '0'+num;
            }
            return num;
        };
    })
    .constant('SW_DELAY', 1000)
    .factory('stepwatch', function (SW_DELAY, $timeout) {
        var data = {
            seconds: 0,
            minutes: 0,
            hours: 0
        },
        stopwatch = null;

        var start = function () {
            stopwatch = $timeout(function () {
                data.seconds++;
                if (data.seconds >= 60) {
                    data.seconds = 00;
                    data.minutes++;
                    if (data.minutes >= 60) {
                        data.minutes = 0;
                        data.hours++;
                    }
                }
                start();
            }, SW_DELAY);
        };

        var stop = function () {
            $timeout.cancel(stopwatch);
            stopwatch = null;
        };

        var reset = function () {
            stop()
            data.seconds = 0;
        };
        return {
            data: data,
            start: start,
            stop: stop,
            reset: reset
        };
    })
    .controller('HomeTabCtrl', function($scope, $state, stepwatch) {
      $scope.myStopwatch = stepwatch;
    });
    </script>

#5

as per your comments, I am providing another answer... the stopwatch factory, that I am using in my project. as per your requirement you can use service like below :

根据你的评论，我提供另一个答案……秒表工厂，我在我的项目中使用。根据你的要求，你可使用以下服务:

checkout the PLUNKER to have a practical example.

检查柱塞有一个实际的例子。

Initially you see instruction page, where timer is initialized to 2 hours.

最初你会看到指令页，其中计时器被初始化为2小时。
Then move to questions 1, where timer starts

然后进入问题1，定时器开始
from question 1 you can go to help page, where the timer pauses

从问题1你可以去帮助页面，在那里计时器暂停。
then you move back to question 2, where timer resumes...

然后你回到问题2，计时器重新开始……

on how to use :

关于如何使用:

start init it on first page

在第一页启动init。

app.controller('view1Ctrl', function($scope, $csCountdown){
  $csCountdown.init(2 * 3600); // 2 hours
  $scope.countdown = $csCountdown.data;
})

start the counter on second page

在第二页开始柜台

app.controller('view2Ctrl', function($scope, $csCountdown){
  $csCountdown.start();
  $scope.countdown = $csCountdown.data;
})

you can display the value on any page using countdown.stringValue

可以使用countdown.stringValue在任何页面上显示值

<h1>Time : {{countdown.stringValue}}</h1>

#1