你好! 我正在做一个 Ionic/Cordova 项目,我在其中使用 Angular Timer
计时器本身工作得很好。这是代码:
<timer ng-click="showLandscape()" interval="1000" countdown="timeType" autostart="false">{{mminutes}}:{{sseconds}}</timer>
现在棘手的部分是,当用户点击它时,我需要在横向模式下显示相同的运行计时器(它调用 showLandscape() 函数)。
ModalService
.init('templates/modal/cron.html', $scope, 'orientation')
.then(function(modal) {
modal.show();
if (window.plugins && window.plugins.orientationLock)
window.plugins.orientationLock.lock("landscape");
});
我在这里调用模式服务以横向模式显示模板。我正在与它共享 $scope
,以便我可以访问它。
我已经改编了this modal example .模态模板还有其他 timer
指令,并使用 $scope 的分钟和秒来继续倒计时。但是,当模态显示(用户点击它)时,模态上的计时器会正确显示时间,但会有某种延迟。
主窗口:计时器显示 08:49。我敲了敲它。模态显示 08:49 但卡住约 2 秒,然后显示 08:48。如果我关闭模式(通过再次点击计时器 - 从而调用 closeModal()-)主窗口的计时器是正确的并继续工作(因为它总是在后台工作)。
我尝试了不同的方法来解决这个问题:
创建其他 Controller 。它没有用,因为除了计时器之外,我还需要共享更多信息,而且我重复了很多代码。
寻找一种在纵向或横向模式下更改同一 Controller 布局的方法。没找到。我可以设置方向(通过插件),但模板始终相同。
模态模式运行良好。它显示了所有其他内容并且工作正常。不幸的是,如果它没有正确显示时间,它会使模态变得无用。
目标:Ionic/Cordova 项目上的 Android/iOS。
谢谢!
最佳答案
修补它
检查此指令的代码后,最适合您的情况是从 <timer>
中获取计时器值指令,就目前而言,该项目的维护者不支持。
但是,这绝对有可能并且我会 forked 修补 <timer>
的原始存储库指令来支持它。
结果 - http://codepen.io/Jossef/pen/OypOQg?editors=101
那么改变了什么?;原始指令的范围是隔离的。意思是hours
, minutes
, ... , 变量不会导出供外部使用。添加是次要的,例如
修补此问题后的唯一解决方法,必须听取 <timer>
勾选事件和 digest
范围,以便有界值将立即反射(reflect)它们的值。
$scope.$on('timer-tick', function(event, args) {
$timeout(angular.noop);
});
用法
要使用补丁指令,请将其替换并包含在您的 HTML 中
<script src="https://rawgit.com/jossef/angular-timer/master/dist/angular-timer.js"></script>
在线演示 - http://codepen.io/Jossef/pen/OypOQg?editors=101
关于javascript - AngularJS - 计时器指令。与模态视图共享间隔,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32140958/