example - Propósito de $ element y $ attrs en controladores de componentes con componentes angularJS 1.5

angularjs element

Question

Estoy trabajando para ponerme al día con 1.5 componentes angulares. He estado siguiendo los videos de todd Motto para comenzar con los componentes junto con la documentación de angular https://docs.angularjs.org/guide/component .

En este punto, parece que los componentes están tomando el lugar de las directivas que usan controladores, pero en nuestro código 1.5 todavía usaríamos directivas para la manipulación de dom.

¿Cuál es el propósito de $ element, $ attrs dentro de un controlador de componentes? Estos parecen estar disponibles para la manipulación. Aquí está el enlace al plunker fuera de los documentos. Sé que no están usando $ element, pero es el ejemplo que estoy leyendo. http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

Pero en código como tal ...

 angular
  .module(''app'', [])
  .component(''parentComponent'', {
    transclude: true,
    template: `
      <div ng-transclude></div>
    `,
    controller: function () {
      this.foo = function () {
        return ''Foo from parent!'';
      };
      this.statement = function() {
        return "Little comes from this code";
      }
    }
  })
  .component(''childComponent'', {
    require: {
      parent: ''^parentComponent''
    },
    controller: function () {

      this.$onInit = function () {
        this.state = this.parent.foo();
        this.notice = this.parent.statement();
      };
    },
    template: `
      <div>
        Component! {{ $ctrl.state }}
        More component {{$ctrl.notice}}
      </div>
    `
  })

¿Cuál sería el uso de $ element si no estamos manipulando el dominio?

Answer 1

Esa es una gran pregunta. Y tengo una respuesta simple para ello.

Se llevan a cabo en componentes solo porque el componente es sintaxis de la directiva.

Antes de los componentes agregados angulares, estaba usando algún tipo de componente de sintaxis para las directivas, era como una convención, que en nuestro proyecto tenemos tipos de directivas, una es responsable de las manipulaciones de DOM, la segunda es directivas con plantillas que no deberían manipular DOM. Después de agregar los componentes, no hicimos más que cambiar nombres.

Así que el Component no es más que una simple directiva que se creó como una nueva entidad que:

1. Siempre tiene plantilla
2. El alcance es siempre aislado
3. Restringir es siempre Elemento

Creo que puede encontrar más respuestas en las fuentes angulares, pero le aconsejo que no mezcle estas entidades, y en caso de que necesite manipular DOM dentro de su componente, simplemente use la directiva en su interior.

Answer 2

Los ganchos de ciclo de vida de los componentes angulares nos permiten realizar una manipulación DOM dentro del controlador de componentes usando el servicio $ element

var myApp = angular.module(''myApp'');
myApp.controller(''mySelectionCtrl'', [''$scope'',''$element'', MySelectionCtrl]);

myApp.component(''mySection'', {
    controller: ''mySelectionCtrl'',
    controllerAs: ''vm'',
    templateUrl:''./component/view/section.html'',
    transclude : true
});

function MySelectionCtrl($scope, $element) {
    this.$postLink = function () {
        //add event listener to an element
        $element.on(''click'', cb);
        $element.on(''keypress'', cb);

        //also we can apply jqLite dom manipulation operation on element
        angular.forEach($element.find(''div''), function(elem){console.log(elem)})

    };

    function cb(event) {
        console.log(''Call back fn'',event.target);
    }
}

declarar componente en html

<my-section>
<div class="div1">
    div 1
    <div>
        div 1.1
    </div>
</div>
<div class="div2">
    div 1
</div>

plantilla parcial del componente (./ component / view / section.html)

<div>
<div class="section-class1">
    div section 1
    <div>
        div section 1.1
    </div>
</div>
<div class="section-class1">
    div section 1
</div>