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); 
}; 

此超时设置为呼吁下一秒的功能。