Scopo di $ elemento e $ attrs nei controller dei componenti con componenti angolari 1.5

Question

Sto lavorando per arrivare alla velocità con 1.5 componenti angolari. Ho seguito i video di Todd Motto per iniziare sui componenti insieme alla documentazione di angular https://docs.angularjs.org/guide/component.

A questo punto sembra che le componenti stiano prendendo il posto delle direttive che utilizzano i controller, ma nel nostro codice 1.5 useremmo ancora le direttive per la manipolazione delle dom.

Qual è lo scopo di $ element, $ attrs all'interno di un controller di componente? Questi sembrano essere disponibili per la manipolazione. Ecco il link al plunker dei documenti. So che non stanno usando $ $, ma è l'esempio che sto leggendo. http://plnkr.co/edit/Ycjh1mb2IUuUAK4arUxe?p=preview

Ma nel codice in questo modo ...

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

Quale sarebbe l'uso di $ elemento se non stanno manipolando il DOM?

Answer 1

Questa è una bella domanda. E ho una risposta semplice per questo.

Hanno luogo nei componenti solo perché Componente è syntax sugar di direttiva.

Prima di componenti aggiunti angolari, stavo usando una sorta di sintassi dei componenti per le direttive, era come una convenzione, che nel nostro progetto abbiamo dei tipi di direttive, uno è responsabile delle manipolazioni del DOM, il secondo sono le direttive con i modelli che non dovrebbe manipolare DOM. Dopo aver aggiunto i componenti, non abbiamo più cambiato i nomi.

Così Component non è altro che semplice direttiva, che è stato creato come nuovo soggetto che:

1. è da sempre modello di
2. Ambito è sempre isolato
3. restrict è sempre elemento

I pensa di poter trovare ancora più risposte in fonti angolari, ma ti consiglio di non mescolare queste entità, e nel caso tu abbia bisogno di manipolare DOM all'interno del tuo componente, basta usare la direttiva all'interno.

Answer 2

angolari ganci ciclo di vita dei componenti consentono di fare manipolazione del DOM all'interno controllore componente utilizzando $ servizio elemento

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

componente dichiarare in html

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

modello parziale

del componente (./ componente/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>