angulaire intervalle de $ n'est pas une question de fonction

Question

Je sais que vous allez probablement marquer cela comme un double, mais aucun des sujets frères et soeurs ne résout pas mon problème, c'est donc ma quantième simple décompter directive:

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; 

J'ai cherché la cause de ce problème et partout j'atteins info que la fonction d'intervalle doit être passée comme une normale sans paramètres ou d'autres addons. Mais j'ai encore la même erreur, ce qui est:

TypeError: $interval is not a function

Quelqu'un peut-il aider?

Answer 1

Vous avez injecter des dépendances dans votre constructeur, non pas dans la fonction link:

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

Answer 2

Le problème avec l'utilisation des classes pour la construction d'objets de directive est que les fonctions de directive ont this non lexical (voir this answer pour plus de détails). Il est possible d'injecter $interval au constructeur, mais l'utiliser de la fonction link est impossible sans le lier:

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

Cela indique un problème de conception. Les directives ne sont pas adaptées aux classes. Les utiliser pour construire des objets directives n'a aucun avantage. Ces classes ne sont pas réutilisables. Ils n'ont pas d'avantages architecturaux.

Angular 1.5+ emprunte des idées à Angular 2 (ce qui facilite la migration est l'une des tâches pour les versions actuelles) et rend le développement centré sur le contrôleur. Cela a abouti au remplacement des fonctions de pré-liaison et de post-liaison avec les crochets $onInit et $postLink.

L'approche pratique pour le développement des AngularJS basée sur la classe peut ressembler à:

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

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

    showRemaining() { ... } 
} 

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

Il est logique de transformer cette directive en un composant à ce stade, parce que c'est ce que les composants sont en train de faire. Ce sont essentiellement des enveloppes pour les directives qui forcent l'approche centrée sur le contrôleur.