[英]Pass data from $mdDialog Child Component to Parent Component
I'm using one app controller to call one model window and I want to pass data from $mdDialog model window to app controller.我正在使用一个应用程序控制器来调用一个模型窗口,并且我想将数据从$mdDialog模型窗口传递到应用程序控制器。 How can I do that?
我该怎么做?
//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());
It's calling my save event from child to parent controller but assigning the variable is not working properly.它正在从子控制器调用我的保存事件到父控制器,但分配变量无法正常工作。
A straight forward way to return values from a $mdDialog
window is to use the promise that it returns:从
$mdDialog
窗口返回值的一种直接方法是使用它返回的承诺:
var promise = $mdDialog.show({
controller: function ($scope,$mdDialog) {
$scope.save = function(x) {
$mdDialog.hide(x);
};
}),
template: `
<div>
<input ng-model="reply" /><br>
<button ng-click="save(reply)">Save</button>
</div>
`,
});
promise.then(function(reply) {
console.log(reply);
});
For more information, see有关更多信息,请参阅
I have found few ways to communicate between Parent to Child
and Child to Parent
, seems like :我发现很少有方法可以在
Parent to Child
和Child to Parent
之间进行通信,看起来像:
$broadcast:
Passing from Parent to Child $emit:
Passing from Child to Parent. $broadcast:
从父级传递到子级$emit:
从子级传递到父级。
Above will be useful if you are having same controller and different component while working with different component as well as controller won't update parent or child scope, results you are not able to show updated value.如果您在使用不同的组件时使用相同的控制器和不同的组件,并且控制器不会更新父级或子级范围,导致您无法显示更新的值,则上述内容将非常有用。
The things which can help is the binding using controller which i have already used for communicate.可以提供帮助的是使用我已经用于通信的控制器的绑定。
Workaround :解决方法:
having pop up to show different component which any controller can consume :弹出以显示任何控制器可以使用的不同组件:
this.$mdDialog.show({
scope: this.$scope,
preserveScope: true,
bindToController: true,
template: '<somecomponentname get-back-items="$ctrl.getBackItems"></somecomponentname>'
});
while somecomponentname component having :而 somecomponentname 组件具有:
constructor() {
this.controller = someItemCtrl;
this.templateUrl = 'scripts/somefolder/someitem.html';
this.bindings = {
getBackItems: '='
};
}
I have defined getBackItems
on one more controller
created within somecomponentname
component like :我已经定义
getBackItems
上one more controller
内创建somecomponentname
状部件:
public getSelectedFields: any;
on Popup close assigning values to getBackItems
and it will immediately reflect to parent controller
as it's two way binding
在弹出
getBackItems
关闭为getBackItems
,它会立即反映到parent controller
因为它是two way binding
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.