Angular $ Intervall ist keine Funktion Ausgabe

Question

Ich weiß, dass Sie wahrscheinlich dies als Duplikat, aber keiner von Geschwister Themen markieren werden nicht mein Problem nicht lösen, so ist dies meine einfaches Datum Countdown-Richtlinie:

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; 

Ich habe die Ursache dieses Problems suchen und überall erreiche ich, dass die Intervallfunktion als eine normale ohne Parameter oder andere Addons übergeben werden muss. Aber noch habe ich den gleichen Fehler, die lautet:

TypeError: $interval is not a function

Kann jemand helfen?

Answer 1

Sie haben Abhängigkeiten in Ihrem Konstruktor zu injizieren, nicht in der link Funktion:

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

Answer 2

Das Problem mit Klassen für die Konstruktion Richtlinie Objekte besteht darin, dass Richtlinie Funktionen nicht-lexikalische this (siehe this answer für weitere Details). Es ist möglich, $interval an den Konstruktor zu injizieren, aber es aus link Funktion ist nicht möglich, ohne sie verbindlich:

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

Dies deutet auf ein Design-Problem. Richtlinien sind nicht für Klassen geeignet. Ihre Verwendung zum Konstruieren von direktiven Objekten hat keine Vorteile. Diese Klassen sind nicht wiederverwendbar. Sie haben keine architektonischen Vorteile.

Angular 1.5+ entlehnt Ideen von Angular 2 (erleichtert die Migration ist eine der Aufgaben für aktuelle Versionen) und macht die Entwicklung Controller-zentriert. Dies führte zum Ersetzen von Pre-Link- und Post-Link-Funktionen mit $onInit und $postLink Hooks.

Der praktische Ansatz für klassenbasierte AngularJS Entwicklung aussehen kann:

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

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

    showRemaining() { ... } 
} 

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

Es ist sinnvoll an dieser Stelle diese Richtlinie in eine Komponente zu konvertieren, weil das ist, was Komponenten tun. Sie sind im Grunde Wrapper für Richtlinien, die einen Controller-zentrierten Ansatz erzwingen.