javascript - AngularJS - 计时器指令。与模态视图共享间隔

Question

你好! 我正在做一个 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。

谢谢!

Answer 1

修补它

检查此指令的代码后，最适合您的情况是从 <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