角度计时器指令不适用于离子框架

Question

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

当我使用bower或google 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>

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

这是一个已知的问题？

什么会阻止它工作？

是否有人们可以推荐的备用计时器？ 这个对我来说似乎最好？

Answer 1

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

以角度启动计时器是通过完成

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

不

element.start();

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

Answer 2

这是有角度的方式： http ： //plnkr.co/edit/ug4VqTkkFWlsYLy7uq4O

还使用$ broadcast事件来控制该指令

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

Answer 3

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

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

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
    };
});

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

具有双向绑定的布尔暂停变量
on-timeout功能：在超时时调用

interval：以秒为单位，之后将调用on-timeout函数

csapp.directive（“csAutoRefresh”，[“timerfactory”，“Logger”，“$ interval”，function（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, }; }]);

Answer 4

我决定不使用angular-timer指令，因为我在重置时遇到问题，我将更改标签，如此处的示例所示。

相反，我根据这个小提琴的计时器。

你可以在这支笔中看到我的最终结果。 它以离子方式加载定时器，即使在更换标签时也能保持计数。 展望未来，可能想要添加一些更改，例如只能在计时器启动时单击停止等。

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

Answer 5

根据你的意见，我提供了另一个答案......我在项目中使用的秒表工厂。 根据您的要求，您可以使用以下服务：

结帐PLUNKER有一个实际的例子。

最初你看到指令页面，其中计时器初始化为2小时。
然后转到问题1，计时器启动
从问题1你可以去帮助页面，计时器暂停
然后你回到问题2，计时器恢复...

关于如何使用：

在第一页开始初始化它

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

在第二页上启动计数器

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

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

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

角度计时器指令不适用于离子框架

问题描述

5 个解决方案

解决方案1
7 已采纳 2014-11-09 08:46:05

解决方案2
4 2014-11-10 14:27:04

解决方案3
3 2014-11-12 08:50:20

解决方案4
2 2014-11-14 14:34:12

解决方案5
2 2014-11-15 03:48:48

角度计时器指令不适用于离子框架

问题描述

5 个解决方案

解决方案1 7 已采纳 2014-11-09 08:46:05

解决方案2 4 2014-11-10 14:27:04

解决方案3 3 2014-11-12 08:50:20

解决方案4 2 2014-11-14 14:34:12

解决方案5 2 2014-11-15 03:48:48

解决方案1
7 已采纳 2014-11-09 08:46:05

解决方案2
4 2014-11-10 14:27:04

解决方案3
3 2014-11-12 08:50:20

解决方案4
2 2014-11-14 14:34:12

解决方案5
2 2014-11-15 03:48:48