角$间隔不是一个函数问题

我知道，你很可能将迎来其视为重复但没有兄弟主题不解决我的问题，所以这是我简单的日期倒计时指令：

class Clock { 
    constructor() { 
     this.restrict = 'AC'; 
     this.replace = true; 
     this.template = require('./templates/clock.tpl.html'); 
     this.scope = {}; 
    } 
    link(scope, elem, attrs, $interval) { 
     let end = new Date('05/05/2017 9:00 AM'); 

     let _second = 1000; 
     let _minute = _second * 60; 
     let _hour = _minute * 60; 
     let _day = _hour * 24; 

     scope.showRemaining =() => { 
      let now = new Date(); 
      let distance = end - now; 
      let days = Math.floor(distance/_day); 
      let hours = Math.floor((distance % _day)/_hour); 
      let minutes = Math.floor((distance % _hour)/_minute); 
      let seconds = Math.floor((distance % _minute)/_second); 

      scope.days = days; 
      scope.hours = hours; 
      scope.minutes = minutes; 
      scope.seconds = seconds; 
     } 

     $interval(showRemaining, 1000;) 
    } 
} 

// create factory function to handle DI 
function factory() { 
    "ngInject"; 

    return new Clock(); 
} 

export default factory;

我已经bean搜索这个问题的原因，并且无处不在我得到的信息，间隔函数必须作为正常的没有参数或任何其他插件传递。但我仍然有同样的错误，那就是：

TypeError: $interval is not a function

有人能帮忙吗？

来源

2017-02-27 Lukas

通过控制器注入它，而不是链接功能 –

你必须注入依赖于你的构造函数，而不是在link功能：

constructor($interval) { 
    // .. 
    this.$interval = $interval; 
} 
link(scope, elem, attrs) { 
    // .. 
    this.$interval(showRemaining, 1000;) 
}

来源

2017-02-27 14:22:29 devqon

upvoted，但我不认为他在书面方式打字稿 – BiAiB

做叶氏，这不是天经地义的打字稿 – Lukas

的是，同样的错误:( – Lukas

使用类构造指令对象的问题是，指令功能具有非词汇this（见this answer了解更多详情）。这可能注入$interval到构造，但使用它从link功能也不是没有可能结合它：

constructor($interval) { 
    ... 
    this.$interval = $interval; 
    this.link = this.link.bind(this); 
}

这表明一个设计问题。指令不适用于类。使用它们来构造指令对象没有好处。这些类不可重用。他们没有建筑优势。

Angular 1.5+借鉴了Angular 2的想法（使迁移更容易是当前版本的任务之一），并使开发控制器为中心。这导致用$onInit和$postLink钩子替代了前链接和后链接功能。

的实用的方法，基于类的AngularJS发展可能看起来像：

class ClockController { 
    constructor($interval) { 
    this.$interval = $interval; 
    } 

    $onInit() { 
    this.$interval(() => this.showRemaining(), 1000); 
    } 

    showRemaining() { ... } 
} 

app.directive('clock',() => ({ 
    ... 
    controller: ClockController 
}));

这是有道理的这项指令在这一点上转换成一个组成部分，因为这是部件在做什么。它们基本上是强制执行以控制器为中心的指令的包装器。

来源

2017-02-27 16:26:09 estus

角$间隔不是一个函数问题

回答

相关问题