子コンポーネントから親コンポーネントにデータを渡す

Question

1つのモデルコントローラを使用して1つのモデルウィンドウを呼び出し、モデルウィンドウからアプリケーションコントローラにデータを渡したいとします。どうやってやるの？

//parent Controller 
class appCtrl implements IappSettings { 
    public displayItems = [some array items]; 
    public sortingItems = [some array items]; 
    public backItems: string; 
} 

dopopup(event) { 
    this.$mdDialog.show({     
     controller: appCtrl, 
     controllerAs: '$ctrl', 
     template: '<displayArrayCtrl on-save="$ctrl.onSave(displayColumns)"></displayArrayCtrl>' 
    }); 
} 

onSave(displayColumns) { //on button click on child controller 
    this.backItems = displayColumns; //Using {{$ctrl.keyItems}} in app.html page but it's giving me empty string 
} 

//Child Controller 
class displayArrayCtrl { 
    saveData = function (selectedFields: any, sortSelectedFields: any) { //on button click on parent controller 
     this.onSave({displayColumns: this.displayColumns}); //calling parent controller event 
    }  
} 

class displayArrayOptionsOptions implements ng.IComponentOptions { 
    public controller: any; 
    public templateUrl: string; 
    public bindings: any; 

    constructor() { 
     this.controller = displayArrayCtrl; 
     this.templateUrl = 'page.html'; 
     this.bindings = { 
      onSave: '&', 
      displayItems: '<', 
      sortingItems: '<' 
     }; 
    } 

angular.module('app') 
    .component('displayArrayCtrl', new displayArrayOptionsOptions()); 

子から親コントローラーへの保存イベントが呼び出されていますが、変数の割り当てが正しく機能していません。

Answer 1

私はParent to ChildとChild to Parent間で通信するいくつかの方法を発見した、のように思える：

$broadcast:子から親へ渡す親から子 に$emit:を渡します。

これは、異なるコンポーネントを使用しているときに同じコントローラと異なるコンポーネントを使用し、コントローラが親スコープまたは子スコープを更新しない場合に有用です。結果は更新された値を表示できません。

私はすでに通信に使用しているコントローラを使用してバインディングを助けることができます。

解決策：somecomponentname成分を有しながら

this.$mdDialog.show({ 
    scope: this.$scope, 
    preserveScope: true, 
    bindToController: true, 
    template: '<somecomponentname get-back-items="$ctrl.getBackItems"></somecomponentname>' 
}); 

：

がポップアップ任意のコントローラが消費することができる異なるコンポーネントを表示するを有する

constructor() { 
    this.controller = someItemCtrl; 
    this.templateUrl = 'scripts/somefolder/someitem.html'; 
    this.bindings = {    
    getBackItems: '=' 
    }; 
} 

を私は内で作成one more controllerにgetBackItemsを定義していますsomecomponentnameのようなコンポーネント：

ポップアップ上の

public getSelectedFields: any; 

近いgetBackItemsに値を代入し、それがtwo way binding

だとして、それはすぐに parent controllerに反映されます