范围 angular-modal 和 angular-timer 指令

Question

我尝试在视图和模式中使用相同的计时器。两者在相同范围内工作：

$scope.openTimer = function() {
var modalInstance = null;
modalInstance = $modal.open({
  templateUrl: 'modal-timer.html',
  controller: 'ModalTimerController',
  scope: $scope,
  backdrop: 'static',
  size: "sm"
});
modalInstance.result.then(function() {
  console.log('onCloseModal');
});
}

这是我的plunker。

我遇到的问题是我无法在视图和模式之间共享运行时间（来自计时器指令）。模态框始终以重置计时器打开。

有什么方法可以在视图和模态中共享完全相同的计时器运行时间？

Answer 1

您可以为您的计时器功能使用服务。

https://docs.angularjs.org/guide/services

我会将作用域上的所有功能移出到服务中，然后仅使用作用域显示当前时间。这样，你就可以将服务注入到控制器中，控制器只负责显示信息。服务是单例的，这意味着它只有一个实例，并且它会在您注入它的任何地方传递。因此，无论它处于什么状态，都会在它注入的任何控制器之间共享。

它看起来像这样（TimeService 保存当前控制器中的代码）：

controller: ['$scope', '$element', 'TimeService',
  function($scope, $element, TimeService) {
    $scope.timeDisplay = TimeService.currentTime;
  }
]

当然，您必须编写服务，并让它的计算为 currentTime 赋值。

范围 angular-modal 和 angular-timer 指令

scope angular-modal and angular-timer directive

jquery

timer

angularjs

angularjs-directive

angular-ui-bootstrap