web-dev-qa-db-fra.com

Utiliser 'require' dans angular component

Selon la documentation (en particulier, le tableau comparant les directives aux composants), angular permettent d'exiger d'autres directives (ou s'agit-il uniquement de composants?). Cependant, les composants ne ne pas avoir de fonction de lien, qui pourrait donner accès au contrôleur requis. La source , contrairement à la documentation, semble suggérer qu'il n'est pas possible d'utiliser 'require' lors de la création de composants.

javascriptangularjsangular-directive
14
Maciej Gurban

La source citée est obsolète. Depuis la 1.5.0, les contrôleurs de composants peuvent être requis dans d'autres composants (la même chose s'applique aux directives).

Un exemple du guide montre comment les composants et les directives doivent interagir en 1.5 sans l'aide de link.

Lorsque require objet et bindToController sont utilisés ensemble, les instances de contrôleur requises sont affectées au contrôleur actuel en tant que propriétés.

Étant donné que cela se produit lors de la liaison de directives, les contrôleurs requis ne sont pas disponibles dans le constructeur du contrôleur, c'est pourquoi $onInit méthode magique est là. S'il existe, il est exécuté juste après l'ajout des contrôleurs requis à this.

Tous les deux

app.directive('someDirective', function () {
  return {
    scope: {},
    bindToController: {},
    controllerAs: 'someDirective',
    require: {
      anotherDirective: '^anotherDirective'
    },
    controller: function ($scope) {
      console.log("You don't see me", this.anotherDirective);

      this.$onInit = function () {
        console.log("Now you do", this.anotherDirective);
      };
    }
  }
});

et

app.component('someComponent', {
  controllerAs: 'someComponent',
  require: {
    anotherDirective: '^anotherDirective'
  },
  controller: function ($scope) {
    console.log("You don't see me", this.anotherDirective);

    this.$onInit = function () {
      console.log("Now you do", this.anotherDirective);
    };
  }
});

les styles de déclaration sont sur un pied d'égalité sous le capot et peuvent être utilisés de manière interchangeable dans 1.5, et component est concis.

18
Estus Flask