角型コンポーネントバインディングオブジェクトは初期化されていません

Question

私のプロジェクトでは、角度1.5のコンポーネントが使用されています。私のコンポーネントでは、私は常にオブジェクトデータのために未定義になる。

product-resultコンポーネントを呼び出す前に$ ctrl.productsが初期化されていないことを願っています。
$ ctrl.productsオブジェクトを初期化した後でのみ、商品成果物コンポーネントを呼び出す方法

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

あなたは$ ctrl.productsの初期化後にコンポーネントを初期化したい場合、あなたは$角度が提供しているサービスをコンパイルすることができます。これを達成する

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

Answer 2

一つの方法は、すなわち$onChangesと$onInit角度の新しいコンポーネントのメソッドにフックすることです：

が初期化取得された場合$ ctrl.productsちょうど行の後に以下の行を使用してください。

products.list.component.jsが、新しい$ctrl.resultsデータセットをレンダリングするproductsオブジェクトのAPI呼び出しを実行しているとします。

product-result.jsコンポーネントは、$ctrl.resultsの一方向バインディングを新しい$onChangesメソッドでチェックすることができます。片方向のバインディングが更新されるたびに$onChangesが呼び出されます。このメソッドは、オブジェクトパラメータを変更します。変更オブジェクトには、変更されたバインドされたプロパティの名前であるキーがあります。 product-result.jsため

あなたのコードは

/** 
* @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. 
    } 
} 

トッドのモットーは、角1.5コンポーネントについての素晴らしいブログ記事を持っていることができ、私はあなたがはるかに簡単な解決策はただng-使用することです https://toddmotto.com/angular-1-5-lifecycle-hooks

Answer 3

を読むことをお勧めします結果がロードされるまで内側のコンポーネントのレンダリングを遅らせる場合は、次のようになります。テンプレートが属するテンプレートをHTMLに保存しますが、内部コンポーネントがDOMに追加されるのを防ぎ、$ctrl.resultsが定義されるまで初期化されます。