web-dev-qa-db-fra.com

Composant angulaire 1.5 vs ancienne directive - où est une fonction de lien?

Je lisais cet article récent Nice sur le nouvel assistant .component() dans Angular 1.5, qui est censé aider tout le monde à migrer vers Angular 2. Tout a l'air sympa et simple, mais je n'ai trouvé aucune information sur la manipulation du DOM dans les composants.

Il existe cependant une propriété template, qui peut être une fonction et accepter les arguments $element et $attrs. Je ne sais toujours pas si cela remplace la fonction link. Cela ne semble pas être le cas.

javascriptangularjsangularjs-directiveangular-directive
57
troorl

EDIT 2/2/16: La documentation 1.5 couvre désormais les composants: https://docs.angularjs.org/guide/component

Quelques réflexions basées sur des lectures (liens ci-dessous):

  • Les composants ne remplacent pas les directives. Un composant est un type spécial de directive qui organise un contrôleur avec un modèle.

  • Les composants n'ont pas de fonction de liaison et les contrôleurs ne sont toujours pas ceux où vous pourriez manipuler les manipulations DOM.

  • Si vous avez besoin d'une manipulation DOM, votre composant peut utiliser d'autres directives qui incluent cette manipulation DOM dans une fonction de lien.

Il m'a fallu un certain temps pour comprendre cela, mais une fois que je l'ai fait, cela a eu du sens: les composants sont des directives mais toutes les directives ne sont pas - ou ne doivent pas être - des composants.

La question sur les fonctions de lien est naturelle, ou était pour moi, quand je pensais que les composants remplaçaient les directives. Pourquoi? Parce que nous avons appris à placer la manipulation du DOM dans la fonction de liaison d'une directive: "Les directives qui souhaitent modifier le DOM utilisent généralement l'option de liaison pour enregistrer les écouteurs du DOM et mettre à jour le DOM." https://docs.angularjs.org/guide/directive .

Si vous utilisez cette hypothèse (les composants remplacent les directives), alors vous constaterez que les documents angulaires ne répondent pas à la question car, eh bien, ce n'est pas la bonne question une fois que vous connaissez le rôle d'un composant. (Les composants sont décrits dans la documentation $ compileProvider pas dans la directive documentation .)

Lecture de fond

Ce que je dis ci-dessus est vraiment une reformulation de ce que Todd Motto a dit dans ce qui est probablement la meilleure discussion (à ce jour) sur les composants et les directives:

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_introduce_the_component/

Il pourrait être utile de tirer ces commentaires dans un article plus général.

La plupart des articles sur les composants ne mentionnent pas de fonction de lien (cela ne veut pas dire que ces articles ne sont pas excellents):

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b#.vrbo1xso0

https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

Ou, lorsque la fonction de lien est mentionnée, elle est entre parenthèses:

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

Un article dit que les composants, "utilisent des contrôleurs au lieu de fonctions de liaison". Mais ce n'est pas une situation "à la place": les contrôleurs ne sont pas des remplaçants pour les fonctions de liaison.

72
jody tate

Cela facilite l'écriture d'une application d'une manière similaire à l'utilisation de composants Web ou au style d'architecture d'application de Angular 2.

Avantages des composants:

une configuration plus simple que les directives simples favorise les valeurs par défaut sane et meilleures pratiques optimisées pour l'écriture d'architecture à base de composants les directives de composant faciliteront la mise à niveau vers Angular 2

Quand ne pas utiliser les composants:

pour les directives qui reposent sur la manipulation du DOM, ajouter des écouteurs d'événements etc, car les fonctions de compilation et de liaison sont indisponibles lorsque vous besoin d'options de définition de directive avancées telles que priorité, terminal, multi-élément lorsque vous souhaitez une directive déclenchée par un attribut ou classe CSS, plutôt qu'un élément

7
surekha shelake

Mise à jour (à partir du 22 août 2017): $ Inject est la méthode recommandée pour ce faire dans AngularJS. Lire Styleguide: Lien Styleguide et docs AngularJS: Docs AngularJS

Pour utiliser des liaisons DOM dans des composants au lieu de créer une directive avec une fonction de lien, vous pouvez injecter '$ element' ou tout autre service nécessaire dans la fonction de votre contrôleur, par exemple.

app.component('pickerField', {
    controller: PickerField,
    template: '<span>Your template goes here</span>'
  });

  PickerField.$inject = ['$element'];

  function PickerField(element) {
    var self = this;
    self.model = self.node.model;
    self.open = function() {
      console.log('smth happens here');
    };
    element.bind('click', function(e) {
      console.log('clicked from component', e);
      self.open();
    });
  }

3
Ekaterina Tokareva

Ok, il semble donc que le contrôleur est le bon endroit pour le faire maintenant, car c’est le seul possible. De plus, nous ne pouvons pas utiliser une option replace dans l'assistant des composants.

2
troorl

Vous pouvez utiliser la fonction $ postLink () qui est dans le plus récent angulaire. 

https://docs.angularjs.org/guide/component

Semblable à la fonction post-link, ce crochet peut être utilisé pour configurer DOM gestionnaires d’événements et manipuler directement le DOM.

0
Szymon Dziewoński