Question

我遇到了如何初始化并稍后在AngularJS中重新初始化指令/组件的问题，并且我对以下任何一种当前方法都不满意。

例如，我有一个<clock>指令/组件，当我初始化时钟时，需要从外部给出时间，以便时钟显示正确的时间。

如果用户从WITHIN时钟更新时间，我们可以设置onChangeTime函数，因为Tero会here onDelete来更新父级。

但如果时间被clock的父级更改，并且clock需要使用新时间重新初始化，该怎么办？

需要重新初始化，因为为了<clock>的目的，传入的时间可能需要解析为小时，分钟，秒等。

我用过三种方式：

1。通过更新功能

mainCtrl使变量（例如updateTime）可用（例如使用＆＃39; =＆＃39;绑定），并且在初始化时将时钟设置为将内部函数设置为用新时间更新时钟。只要需要更新时钟，mainCtrl就可以致电updateTime。

.controller('mainCtrl', function() {
  var vm = this;
  vm.changeTime = function(time) {
    // do controller stuff
    vm.updateTime(time);  // this is clock's function
  }
})

.component('clock', {
  restrict: 'E',
  bindings: {
    "updateTime": '='
  },
  controller: 'ClockController as vm'
});

function ClockController() {
  var vm = this;
  // initialise clock by passing the parent its update function
  vm.updateTime = function(time) {
    // use time arg to update internal clock variables such as 
    // hours, mins, secs, so that the clock displays the correct time
  }
}

...

<div ng-controller="mainCtrl as vm">
  <clock update-time="vm.updateTime"></clock>
</div>

我喜欢这种方法，但是你会得到＆＃34; updateTime不是一种功能＆＃34;当您需要clock显示时间尽快mainCtrl初始化时。可以用$timeout黑客修复，但是很糟糕。

2。传递更新功能和变量

将updateTime函数AND time（例如日期时间对象）传递为＆＃39; =＆＃39;参数。首次初始化时，clock使用time变量设置其内部时间。之后，mainCtrl可以使用updateTime告诉clock时间已经改变。

.controller('mainCtrl', function() {
  var vm = this;
  vm.time = Date.now();

  vm.changeTime = function(time) {
    vm.time = time;
    vm.updateTime();  //notifies clock that time changed
  }
})

.component('clock', {
  restrict: 'E',
  bindings: {
    "updateTime": '=',
    "time": '='
  },
  controller: 'ClockController as vm'
});

function ClockController() {
  var vm = this;

  vm.updateTime = _initTime // for parent to re-initialise later

  function _initTime() {
    // use local vm.time to update internal clock variables such as 
    // hours, mins, secs, so that the clock displays the correct time
  }

  _initTime();  // first initialisation
}

...

<div ng-controller="mainCtrl as vm">
  <clock update-time="vm.updateTime" time="vm.time"></clock>
</div>

这假设在mainCtrl需要重新初始化clock时，clock已初始化，因此updateClock函数可用于mainCtrl在1中解决问题。这很有效，但看起来很奇怪而且多余updateTime只是说'＃34;哦，顺便说一下，我更新了time＆＃34;。

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": '='
  },
  controller: 'ClockController as vm'
});

function ClockController($scope) {
  var vm = this;

  $scope.$watch('vm.time', function(newVal) {
    // use newVal to update internal clock variables such as 
    // hours, mins, secs, so that the clock displays the correct time
  }
}

...

<div ng-controller="mainCtrl as vm">
  <clock time="vm.time"></clock>
</div>

由于性能问题，我一般不喜欢$ watch。

什么是最好的（最角度）方式？人们可以想到或推荐更好的方法吗？

在Angularjs中初始化并重新初始化组件

1。通过更新功能

2。传递更新功能和变量

3。使用$ watch

0 个答案: