web-dev-qa-db-fra.com

Objectif de $ element et $ attrs dans les contrôleurs de composants avec angularJS components 1.5

Je travaille à me mettre à jour avec les composants 1.5 angular. J'ai suivi les vidéos de todd Motto pour commencer avec les composants et la documentation d'angular https: //docs.angularjs .org/guide/component .

À ce stade, il semble que les composants remplacent les directives qui utilisent des contrôleurs, mais dans notre code 1.5, nous utiliserions toujours des directives pour la manipulation de dom.

À quoi sert $ element, $ attrs à l'intérieur d'un contrôleur de composant? Ceux-ci semblent être disponibles pour la manipulation. Voici le lien vers le plongeur hors des documents. Je sais qu'ils n'utilisent pas $ element, mais c'est l'exemple que je lis. http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

Mais dans un code comme ça ...

 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>
    `
  })

Quelle serait l'utilité de $ element si nous ne manipulons pas le dom?

angularjsdomangularjs-components
23
Winnemucca

Voilà une excellente question. Et j'ai une réponse simple à cela.

Ils ont lieu dans les composants simplement parce que le composant est le sucre de syntaxe autour de la directive.

Avant angular angulaire ajouté des composants, j'utilisais une sorte de syntaxe de composant pour les directives, c'était comme une convention, que dans notre projet, nous avons deux types de directives, l'une est responsable des manipulations DOM, la deuxièmement, les directives avec des modèles qui ne devraient pas manipuler le DOM. Après l'ajout de composants, nous n'avons fait que changer de nom.

Donc Component n'est rien de plus qu'une simple directive qui a été créée comme une nouvelle entité qui:

  1. A toujours un modèle
  2. La portée est toujours isolée
  3. Restreindre est toujours un élément

Je pense que vous pouvez trouver encore plus de réponses dans les sources angular, mais je vous conseille de ne pas mélanger ces entités, et au cas où vous auriez besoin de manipuler le DOM à l'intérieur de votre composant, utilisez simplement la directive à l'intérieur.

21
Mikki

Les crochets de cycle de vie des composants angulaires nous permettent de faire une manipulation DOM à l'intérieur du contrôleur de composants en utilisant le service $ 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);
    }
}

déclarer le composant en html

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

modèle partiel du composant (./ 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>
20
Ratheesh