AngularJS - Timer指令。与模态视图共享间隔

Question

嗨！我正在进行Ionic / Cordova项目，我正在使用Angular Timer

计时器本身工作正常。这是代码：

transform

现在棘手的部分是，当用户点击它时，我需要在横向模式下显示相同的运行计时器（它调用showLandscape（）函数）。

 <timer ng-click="showLandscape()" interval="1000" countdown="timeType" autostart="false">{{mminutes}}:{{sseconds}}</timer>

我在这里调用模态服务以横向模态显示模板。我正在与ModalService .init('templates/modal/cron.html', $scope, 'orientation') .then(function(modal) { modal.show(); if (window.plugins && window.plugins.orientationLock) window.plugins.orientationLock.lock("landscape"); }); 共享，因此我可以访问它。

我已经改编this modal example。模态模板具有其他$scope指令，并使用$ scope的分钟和秒来继续倒计时。但是当模态显示（用户点击它）时，模态上的计时器正确显示时间，但它有某种延迟。

主窗口：计时器显示08:49。我轻拍它。模态显示在08:49但冻结约2秒然后显示08:48。如果我关闭模态（通过再次点击计时器 - 通过调用closeModal（） - ）主窗口的计时器是正确的并继续工作（因为它总是在后台工作）。

我尝试过不同的方法解决这个问题：

• 创建其他控制器。它没有用，因为除了计时器之外我需要分享更多信息，而且我复制了很多代码。

• 搜索在纵向或横向模式下更改同一控制器布局的方法。没找到。我可以设置方向（通过插件），但模板始终是相同的。

• 模态工作正常。它显示了所有其他的东西，并且工作正常。不幸的是，如果没有正确显示时间，它会使模态失效。

目标：Ionic / Cordova项目中的Android / iOS。

谢谢！

Answer 1

补丁

在检查了该指令的代码之后，最适合您的情况是从<timer>指令中获取计时器值，因为现在维护人员不支持 这个项目。

然而，绝对可能和iv＆＃39> e forked 原始存储库修补<timer>指令以支持它。

结果 - http://codepen.io/Jossef/pen/OypOQg?editors=101

那是什么改变了？;原始指令的范围是孤立的。意味着hours，minutes，...，变量不会导出供外部使用。添加量很小，例如

修补后的唯一解决方法是，必须听取<timer> tick事件和digest范围，以便有界值能够毫不拖延地反映其值。

$scope.$on('timer-tick', function(event, args) {
  $timeout(angular.noop);
});

用法

要使用patched指令，请将其替换并包含在HTML

中

<script src="https://rawgit.com/jossef/angular-timer/master/dist/angular-timer.js"></script>

在线演示 - http://codepen.io/Jossef/pen/OypOQg?editors=101