Javascript angular timer指令不适用于离子框架_Javascript_Angularjs_Timer_Ionic Framework_Angular Directive

Javascript angular timer指令不适用于离子框架

javascript angularjs timer ionic-framework

Javascript angular timer指令不适用于离子框架,javascript,angularjs,timer,ionic-framework,angular-directive,Javascript,Angularjs,Timer,Ionic Framework,Angular Directive,我在用ionic框架实现angular timer指令时遇到问题。当我使用bower或GoogleCDN实现代码时，我没有任何问题 <!DOCTYPE html> <html> <head> <title>Plain Javascript Timer Example</title> <script src="../bower_components/angular/angular.min.

我在用ionic框架实现angular timer指令时遇到问题。

当我使用bower或GoogleCDN实现代码时，我没有任何问题

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


普通Javascript计时器示例
函数startTimer（）{
document.getElementsByTagName（'timer'）[0].start（）；
}
函数stopTimer（）{
document.getElementsByTagName（'timer'）[0].stop（）；
}
普通JavaScript定时器示例
启动计时器
停止定时器

但是当我使用离子束时我不能让计时器工作。并且在控制台中似乎没有任何错误

这是一个已知的问题吗

什么会阻止它工作

是否有一个备用计时器，人们可以重新启动？这一个对我来说似乎是最好的？

试着看看下面的代码示例：

以角度启动计时器是通过

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

不是

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

以下是一种方式：

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

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

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

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

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

csapp.factory（“timerfactory”，函数（）{
变量刷新={
暂停：错误，
暂停：函数（）{refresh.suspend=true；}，
cont:function（）{refresh.suspend=false；}，
切换：函数（）{refresh.suspend=！refresh.suspend；}，
refreshText:function（）{return refresh.suspend？“Resume refresh”：“Pause refresh”；}
};
变量计时器={
挂起时间：0，
刷新间隔：60，
重置：函数（）{timer.timePending=timer.refreshInterval；}，
更新：函数（）{
如果（timer.timePending<0）timer.reset（）；
timer.timePending--；
},
完成：函数（）{return timer.timePending 0）{
scope.factory.timer.refreshInterval=scope.interval；
}
factory.timer.reset（）；
范围：$watch（函数（）{
返回factory.timer.timePending；
}，函数（）{
如果（！factory.timer.done（））返回；
var结果=范围$eval（范围onTimeout）；
if（angular.isObject（result）和angular.isFunction（result.then））{
scope.isprocessing=false；
factory.timer.reset（）；
result.finally（函数（）{
factory.timer.reset（）；
});
};
});
范围：$watch（'pauseOn'，函数（）{
if（scope.pauseOn）{
factory.refresh.pause（）；
}否则{
factory.timer.reset（）；
factory.refresh.cont（）；
}
});
var updateTimer=函数（）{
if（scope.isprocessing）返回；
如果（工厂、刷新、暂停）返回；
factory.timer.update（）；
};
var interval=$interval（updateTimer，1000）；
作用域：$on（“$destroy”，函数（）{
$interval.cancel（interval）；
});
};
返回{
限制：'E'，
作用域：{onTimeout:'&'，暂停：'='，间隔：'@'}，
模板：模板fn，
链接：linkFn，
};
}]);

我决定不使用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>


主页
{{myStopwatch.data.hours | numberFixedLen:2}:{{myStopwatch.data.minutes | numberFixedLen:2}:{{{myStopwatch.data.seconds | numberFixedLen:2}
开始
停止
重置
.filter（'numberFixedLen'，函数（）{
返回函数（n，len）{
var num=parseInt（n，10）；
len=parseInt（len，10）；
if（isNaN（num）| isNaN（len））{
返回n；
}
num=''+num；
while（num.length=60）{
data.seconds=00；
data.minutes++；
如果（data.minutes>=60）{
data.minutes=0；
data.hours++；
}
}
start（）；
}，SW_延迟）；
};
var stop=函数（）{
$timeout.cancel（秒表）；
秒表=零；
};
变量重置=函数（）{
停止（）
data.seconds=0；
};
返回{
数据：数据，
开始：开始，
停:停,，
重置：重置
};
})
.controller（'HomeTabCtrl'，函数（$scope、$state、stepwatch）{
$scope.myStopwatch=stepwatch；
});

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

检查以获得一个实际示例

最初您会看到指令页面，其中计时器被初始化为2小时

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

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

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

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