10

我在使用离子框架实现角度计时器指令时遇到问题。 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时， 我无法让计时器工作。并且似乎在控制台中没有任何错误。

这是一个已知的问题？

什么会阻止它工作？

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

4

5 回答 5

7

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

以角度启动计时器是通过

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

不是

element.start();

顺便说一句，您的 ng-app 应该在 html/body 标记中，而不是在计时器标记中。

于 2014-11-09T08:46:05.083 回答
4

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

也使用 $broadcast 事件来控制这个指令

$scope.start = function () {
  $scope.$broadcast('timer-start');
};
于 2014-11-10T14:27:04.607 回答
3

根据评论中的讨论，我正在分享我正在使用的基本指令的实现。这不像角度计时器那样通用，因此您可能需要稍微调整一下以满足您的需要。

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

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个操作

  1. 具有 2 路绑定的布尔暂停变量

  2. on-timeout 函数：将在超时时调用

  3. 间隔：以秒为单位，之后将调用 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,
 };
}]);
于 2014-11-12T08:50:20.710 回答
2

我决定不使用 angular-timer 指令，因为我在重置选项卡时遇到了问题，正如您在此处的示例中看到的那样。

相反，我基于这个小提琴的计时器。

你可以在这支笔上看到我的最终结果。它在 ionic 中加载一个计时器，即使在更改标签时也能保持计数。展望未来，可能需要对其添加更多更改，例如只能在计时器启动时单击停止等。

        <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>
于 2014-11-14T14:34:12.290 回答
2

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

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

  1. 最初您会看到说明页面，其中计时器被初始化为 2 小时。

  2. 然后转到问题 1，计时器开始的地方

  3. 从问题 1 您可以转到帮助页面，计时器暂停的地方

  4. 然后你回到问题2，计时器恢复......

关于如何使用：

  1. 在第一页开始初始化

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

  2. 在第二页启动计数器

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

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

<h1>Time : {{countdown.stringValue}}</h1>
于 2014-11-15T03:48:48.843 回答