AngularJS簡單時鐘組件

Question

由於我目前正在嘗試構建基於angularJS的智能鏡像系統，因此我開始製作一個基本的時鐘組件。在完成了一些角度之前，但沒有使用組件結構，我決定給這個鏡頭。

的angularJS component tutorial很快就學會了我不使用$scope，但this相反，我寫我的組件，如下所示：

angular 
    .module('smartMirrorFrontend', []) 
    .component('clock', { 
     template: '<div class="iface-component" id="component-clock">' + 
         '<h1>Clock component Angular</h1>' + 
         '<span id="clock-hours" >{{ $ctrl.hh }}</span>:' + 
         '<span id="clock-minutes">{{ $ctrl.mm }}</span>:' + 
         '<span id="clock-seconds">{{ $ctrl.ss }}</span>' + 
        '</div>', 
     controller: function ClockController($interval){ 
      this.hh = this.mm = this.ss = null; 

      this.clock = function(){ 
       const d = new Date(); 
       this.hh = ('0' + d.getHours()).slice(-2); 
       this.mm = ('0' + d.getMinutes()).slice(-2); 
       this.ss = ('0' + d.getSeconds()).slice(-2); 
      }; 
      this.clock(); 
      $interval(this.clock, 1000); 
     } 
    }); 

現在，這一切都運行完美，除了一個事實，即既不$interval也不$timeout似乎每秒鐘都可以開啓我的功能。

這裏是一個小問題：我已經檢查了其他在計算器上的AngularJS時鐘問題，但沒有實現它在this樣式中，而是使用$scope代替。他們也只是把值放在一個範圍內，而我需要這個時鐘能夠在垂直模式下（如此從上到下）在單獨的跨度上（如模板部分所示）

Web瀏覽器中的控制檯是沒有顯示任何問題，組件會顯示並正確加載時間，這意味着該功能只會觸發一次。該組件被插入到html中使用<clock></clock>

我的問題是：爲什麼我的間隔不能正常工作，我該如何使它工作？

Answer 1

此問題與$interval不符，但本地化範圍爲this。

this是JavaScript中的一個唯一標識符，它的作用範圍是調用它的特定函數。在這裏給出的代碼中，當執行$interval時，this指向clock()函數，而不是ClockController函數。

有兩種方法可以解決這個問題;一個簡單的方法是創建一個this的別名，以便它可以在回調中引用。另一種方法是使用.bind()。我將在這裏展示的別名方法：

controller: function ClockController($interval) { 
    var comp = this; 
    this.hh = this.mm = this.ss = null; 

    this.clock = function() { 

    const d = new Date(); 
    comp.hh = ('0' + d.getHours()).slice(-2); 
    comp.mm = ('0' + d.getMinutes()).slice(-2); 
    comp.ss = ('0' + d.getSeconds()).slice(-2); 
    console.log(comp); 
    }; 
    this.clock(); 
    $interval(this.clock, 1000); 
} 

http://plnkr.co/edit/NFmP29re497d5kyJnqNP?p=preview

Answer 2

在你的指令開始，你可以指定這個變量：

var self = this; 

這可以讓你知道自己指的是指令。當你在其他函數中使用這個時很有用。

你需要設置你的內部時鐘功能的超時，所以它不斷調用它的自我

self.clock = function(){ 
    var d = new Date(); 
    self.hh = ('0' + d.getHours()).slice(-2); 
    self.mm = ('0' + d.getMinutes()).slice(-2); 
    self.ss = ('0' + d.getSeconds()).slice(-2); 
    this.time = new Date(); 
    $timeout(self.clock,new Date().getTime() % 1000); 
}; 

此超時設置爲呼籲下一秒的功能。