初始化和重新初始化Angularjs组件

我在AngularJS中一直遇到如何初始化和重新初始化指令/组件的问题，并且对我目前的任何方法都不满意。例如，我有一个指令/组件，需要在初始化时从外部给出时间，以便时钟显示正确的时间。如果用户从内部更新时间，我们可以设置一个onChangeTime函数，就像Tero在这里用onDelete更新父级一样。但是如果时间由clock的父级更改，并且需要使用新时间重新初始化clock呢？它需要重新初始化，因为也许传入的时间需要解析为小时、分钟、秒等，以便使用。我有三种方法：

1. 传递更新函数

mainCtrl创建一个变量，例如updateTime，通过'='绑定使其可用，当时钟初始化时，它将该变量设置为将使用新时间更新时钟的内部函数。mainCtrl在需要更新时钟时间时可以调用updateTime。

.controller ('mainCtrl'，function（）{
  var vm = this;
  vm.changeTime = function(time) {
    // 执行控制器操作
    vm.updateTime(time);  // 这是时钟的函数
  }
})
.component ('clock'，{
  restrict: 'E'，
  bindings: {
    "updateTime"：'='
  }，
  控制器：'ClockController as vm'
}）;
function ClockController() {
  var vm = this;
  // 通过传递其更新函数初始化时钟
  vm.updateTime = function(time) {
    // 使用时间参数更新内部时钟变量，例如小时、分钟、秒等，以便时钟显示正确的时间
  }
}
...
  

我喜欢这种方法，但是当您需要clock尽快显示时间时，会出现"updateTime不是函数"的问题。可以通过$timeout的方法来解决，但是不太好。

2. 传递更新函数和变量

将updateTime函数和time（例如日期时间对象）作为'='参数传递。在第一次初始化时，clock使用time变量设置其内部时间。之后，mainCtrl可以使用updateTime告诉clock时间已更改。

.controller ('mainCtrl'，function（）{
  var vm = this;
  vm.time = Date.now（）;
  vm.changeTime = function(time) {
    vm.time = time;
    vm.updateTime();  // 通知clock时间已更改
  }
})
.component ('clock'，{
  restrict: 'E'，
  bindings: {
    "updateTime"：'='，
    "time"：'='
  }，
  控制器：'ClockController as vm'
}）;
function ClockController() {
  var vm = this;
  vm.updateTime = _initTime // 用于父级重新初始化
  function _initTime() {
    // 使用本地vm.time更新内部时钟变量，例如小时、分钟、秒等，以便时钟显示正确的时间
  }
  _initTime();  // 第一次初始化
}
...
  

这假设在mainCtrl需要重新初始化clock时，clock已经初始化，并且将updateClock函数提供给mainCtrl，从而解决了1中的问题。这个方法可以工作，但是有一个奇怪的地方，就是为了表达“顺便说一下，我更新了time”，需要有一个updateTime。

3. 使用$watch

只需传递time并让clock在其上放置一个$watch。

.controller ('mainCtrl'，function（）{
  var vm = this;
  vm.time = Date.now（）;
  vm.changeTime = function(time) {
    vm.time = time;
  }
})
.component ('clock'，{
  restrict: 'E'，
  bindings: {
    "time"：'='
  }，
  控制器：'ClockController as vm'
}）;
function ClockController（$scope）{
  var vm = this;
  $scope.$watch('vm.time'，function(newVal) {
    // 使用newVal更新内部时钟变量，例如小时、分钟、秒等，以便时钟显示正确的时间
  }
}
...
  

我不喜欢$watch，因为它会带来性能问题。什么是最好（最符合Angular的）方法？有人能想到或推荐更好的方法吗？