Передача данных из дочернего компонента в родительский компонент

Question

Я использую один контроллер приложения для вызова одного окна модели, и я хочу передать данные из окна модели в контроллер приложения. Как я могу это сделать?

//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: Переходя от потомка к родителю.

Выше будет полезно, если у вас есть один и тот же контроллер и другой компонент при работе с другим компонентом, а контроллер не будет обновлять родительскую или дочернюю область, в результате вы не сможете показать обновленное значение.

То, что может помочь, это привязка с использованием контроллера, который я уже использовал для связи.

Обход:

, имеющий всплывающее окно, чтобы показать другой компонент, который любой контроллер может потреблять:

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

в то время как somecomponentname компонент, имеющий:

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

Я определил getBackItems на one more controller создан в рамках somecomponentname Компонент:

public getSelectedFields: any; 

на Popup близко присваивая значения getBackItems и он будет немедленно отражать в parent controller, как это two way binding