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（＆＃34; csAutoRefresh＆＃34;，[＆＃34; timerfactory＆＃34;，＆＃34;记录器＆＃34;，＆＃34; $ interval＆＃34;，功能（工厂，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指令，因为当我从example here可以看到更改标签时，我遇到了重置问题。

相反，我的计时器基于this fiddle。

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

        <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，计时器启动
你可以去帮助页面，计时器暂停
然后你回到问题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 个答案: