javascript - Componente angular 1.5 vs. diretiva antiga-onde está uma função de link?




angularjs angularjs-directive (4)

De acordo com a documentação atual do Angular2 (consulte https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md ), ainda haverá diretivas no Angular2. Então, basicamente, você poderá usar o @Directive ou o @Component, onde:

  • As diretivas são úteis para encapsular o comportamento.
  • Component é uma diretiva que usa o sombra DOM para criar um comportamento visual encapsulado. Normalmente, os componentes são usados ​​para criar widgets da interface do usuário ou dividir o aplicativo em componentes menores.

Portanto, de acordo com isso, se você precisar de manipulação do DOM, precisará usar o @Directive, portanto, o Angular.directive no Angular 1.x. As ligações de eventos podem ser feitas usando as propriedades do host . Com relação à manipulação do DOM em si, ainda falta documentação (por exemplo, https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md ou https://github.com/angular/angular/blob/master/modules/angular2/docs/core/08_lifecycle.md ), mas você pode procurar o Lifecycle de Lifecycle conforme sugerido aqui https://stackoverflow.com/a/32062065 .

Como resposta curta, com Angular 1.5+, continue usando angular.directive se você tiver acesso DOM, caso contrário, encapsule em angular.component . Tente também reduzir o máximo possível o uso do $scope para eventos não-dom e prefira o RxJS para isso, consulte https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.obgb6dl6n ,

Eu estive lendo este belo article recente sobre o novo auxiliar .component() no Angular 1.5, que deve ajudar todos a migrar para o Angular 2 eventualmente. Tudo parece agradável e simples, mas não consegui encontrar nenhuma informação sobre a manipulação do DOM dentro dos componentes.

Porém, existe uma propriedade de template , que pode ser uma função e aceitar argumentos $element e $attrs . Ainda não está claro para mim se essa é a substituição de uma função de link . Parece que não.


Isso facilita a criação de um aplicativo de maneira semelhante ao uso de componentes da Web ou ao estilo de arquitetura de aplicativos do Angular 2.

Vantagens dos componentes:

A configuração mais simples do que as diretivas simples promove padrões saudáveis ​​e as práticas recomendadas otimizadas para a escrita de arquitetura baseada em componentes. As diretivas de componentes facilitarão a atualização para o Angular 2.

Quando não usar componentes:

para diretivas que dependem da manipulação do DOM, adição de listeners de eventos etc., porque as funções de compilação e link não estão disponíveis quando você precisa de opções avançadas de definição de diretiva, como prioridade, terminal e vários elementos, quando deseja uma diretiva que é acionada por um atributo ou classe CSS , em vez de um elemento


Você pode usar a função $ postLink () que está na mais nova angular.

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

Semelhante à função pós-link, esse gancho pode ser usado para configurar manipuladores de eventos DOM e manipular DOM diretamente.


Atualização (de 22 de agosto de 2017): $ inject é a maneira recomendada de fazer isso no AngularJS. Leia Guia de estilo: link do Guia de estilo e documentos do AngularJS : Documentos do AngularJS

Para usar ligações DOM em componentes, em vez de criar uma diretiva com a função link, você pode injetar '$ element' ou outro serviço necessário na função do controlador, por exemplo

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();
    });
  }





angular-directive