javascript - AngularJS 简单时钟组件

Question

因为我目前正在尝试制作一个基于 angularJS 的智能镜像系统，所以我开始制作一个时钟组件作为基础。之前做过一些 Angular 分析，但没有使用组件结构，我决定试一试。

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似乎能够每秒触发我的功能。

这是一个小问题:我已经在 stackoverflow 上查看了其他 AngularJS 时钟问题，但没有一个在 this 中实现它。风格，并使用 $scope反而。他们也只是将值放在一个跨度中，而我需要这个时钟能够在不同的跨度中以垂直模式(从上到下)站立(如模板部分所示)

网络浏览器中的控制台没有显示任何问题，该组件显示并正确加载了一次时间，这意味着该函数确实按预期触发了一次。该组件使用 <clock></clock> 插入到 html 中

我的问题是:为什么我的间隔不能正常工作，我怎样才能让它正常工作？

Answer 1

此处的问题与 $interval 无关但具有 this 的本地化范围.

this是 JavaScript 中的唯一标识符，作用域为调用它的特定函数。在此处提供的代码中，this指向 clock()功能，而不是 ClockController $interval时的功能被执行。

有两种方法可以解决这个问题；一种简单的方法是为 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