Eckige Komponente Bindungen Objekte nicht initialisiert

Question

Ich verwende Winkel 1,5 Komponenten in meinem Projekt. In meiner Komponente werde ich immer undefiniert für die Objektdaten.

Ich hoffe, dass die $ ctrl.products nicht vor dem Aufruf der Produkt-Ergebnis-Komponente initialisiert werden. So rufen Sie die Produktergebniskomponente erst nach der Initialisierung der
$ ctrl.products-Objekte auf.

products.list.component.html

<div class="container"> 
    <div class="col-md-6" > 
     <span>{{$ctrl.products}}</span> 
     <product-result data="$ctrl.results" max="6"></product-result> 
    </div> 

</div> 

Answer 1

Wenn Sie die Komponente nach der Initialisierung von $ ctrl.products initialisiert, dann können Sie $ Dienst, zur Verfügung gestellt Winkel hat kompilieren verwenden.

Verwenden Sie die folgende Zeile direkt nach der Zeile, in dem $ ctrl.products initialisiert zu werden:

var domObj = $compile('<my-directive></my-directive>')($scope); 
$('selector where you want to append this directive').append(domObj); 

Answer 2

Eine Möglichkeit, dies zu erreichen, ist in Winkel des neuen Komponentenmethoden einzuzuhaken heißen $onChanges und $onInit.

Wenn products.list.component.js sagt einen API-Aufruf auf dem Produkt-Objekt, das dann einen neuen $ctrl.results Datensatz rendert.

Sie könnten product-result.js Komponente überprüfen Sie die Einwegbindung für $ctrl.results mit der neuen $onChanges Methode. $onChanges wird aufgerufen, wenn unidirektionale Bindungen aktualisiert werden. Die Methode übernimmt einen Änderungsobjektparameter. Das Änderungsobjekt enthält Schlüssel, die Namen der gebundenen Eigenschaften sind, die geändert wurden.

Ihr Code für product-result.js könnte

/** 
* @ngdoc function 
* @name $onInit 
* @description on bootstrap for the component check if the value `ctrl.results ` is falsy  
*/ 
$onInit: function $onInit() { 
    if (!this.results) { 
     this.showNoDataAvaliable = true; 
    } 
}, 

/** 
* @ngdoc function 
* @name $onChanges 
* @description when component product-list passes a new value for $ctrl.results, Show the data. 
* @param {Object} changes the changes object when any binding property is updated, this is similar to 
* having a watch function on $scope.variable 
*/ 
$onChanges: function $onChanges (changes) { 
    if (changes.data && changes.data.currentValue) { 
     this.showNoDataAvaliable = false; 
     //... more code on how to display the data. 
    } 
} 

Todd Motto hat eine große Blog-Post über Winkel 1.5 Komponente, empfehle ich Ihnen https://toddmotto.com/angular-1-5-lifecycle-hooks

Answer 3

Eine viel einfachere Lösung zu lesen ist, nur zu verwenden ng- Wenn das Rendering der inneren Komponente verzögert werden soll, bis die Ergebnisse geladen werden:

Dies wird Sie können Ihren HTML-Code in der Vorlage beibehalten, wo er hingehört, aber verhindern, dass die innere Komponente zum DOM hinzugefügt und initialisiert wird, bis $ctrl.results definiert ist.