私は私のコンポーネントAngluarjs

Question

で準備ができていないバインディングで

対処私は結合、

.component('selectionButton', { 
    bindings: { 
     parentForm : '<' 
    }, 
    templateUrl: 'selection-button-component.html', 
    controller: 'selectionButtonController', 
    controllerAs: 'selBtnCtrl' 
}); 

としてオブジェクトを渡している問題は、私のコンポーネントが初期化されたとき、私は渡しているオブジェクトがまだロードされていないということです私は私のページが完全にロードされた後、私はボタンをクリックしたときに私はトリガ機能、でvm.parentFormを呼び出すが、私はいつもundefinedとしてそれを得る私のコントローラで

vm.$onChanges = function(newObj){ 
    if(angular.isDefined(newObj.parentForm.currentValue)){ 
     vm.parentForm = newObj.parentForm.currentValue; 
    } 
}; 

：そう$ onChangesフックに私はこれをしませんでした、たとえ私が値を変更したとしても$onChanges 。

vm.$onChanges関数を調べると、vm.parentFormの値がchangesObj.parentFormに新しい値を取得していることがわかります。

どうすればこの問題を解決できますか？

編集：

私は次のようng-ifと私の要素をラップしようとした：

<span ng-if="fullPage.posteForm"> 
      <selection-button parent-form="fullPage.posteForm" ></selection-button> 
     </span> 

が、これは動作しませんでした。私も同様にうまくいかなかった双方向結合を試みました。

Answer 1

オブジェクトをコンポーネントに渡すと、プロミスや他のアクションが解決されるのを待っているにも関わらず、オブジェクト定義が定義されていないため、準備ができていない可能性があります。そのようなエスケナリオの場合、isFirstChange()を使用できます。 このような場合を示す実例はJSFiddle exampleです。コンソールを開いて、タイムアウト後にバインディングがいつ更新されるかを確認します。

注：コンポーネントのテンプレートで使用されているオブジェクト名が、コンポーネントに渡されたオブジェクト名と等しい場合、新しいオブジェクトを作成する必要はありません。コンポーネントで更新され、テンプレートで利用可能になります。