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似乎每秒都无法触发我的功能之外，这一切都完美无缺。

这里有一个小问题：我已经检查了stackoverflow上的其他AngularJS时钟问题，但没有一个以this样式实现，而是使用$scope代替。他们也只是将值放在一个跨度中，而我需要这个时钟能够以单独的跨度（如模板部分所示）以垂直模式（从上到下）站立。

webbrowser中的控制台没有显示任何问题，组件显示并正确加载时间，这意味着该功能会触发一次。该组件使用<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

Answer 2

在指令开始时，您可以将其分配给变量：

var self = this;

这允许您知道self指向该指令。当您在其他函数中使用它时，这非常有用。

你需要在你的时钟函数内设置一个超时，这样它就会一直调用它自己的

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

此超时设置为在下一秒调用该函数。

AngularJS简单时钟组件

2 个答案: