将数据从 $mdDialog 子组件传递到父组件答案

【问题标题】：Pass data from $mdDialog Child Component to Parent Component将数据从 $mdDialog 子组件传递到父组件
【发布时间】：2016-10-13 10:35:44
【问题描述】：

我正在使用一个应用控制器来调用一个模型窗口，并且我想将数据从$mdDialog 模型窗口传递到应用控制器。我该怎么做？

//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());

它将我的保存事件从子控制器调用到父控制器，但分配变量无法正常工作。

【问题讨论】：

标签： angularjs typescript angularjs-material

【解决方案1】：

从$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);
});

有关详细信息，请参阅

AngularJS Material $mdDialog Service API Reference

【讨论】：

【解决方案2】：

我发现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: '='
  };
}

我在one more controller 上定义了getBackItems somecomponentname 组件，例如：

public getSelectedFields: any;

在弹出关闭时将值分配给getBackItems，它会立即反映到parent controller，因为它是two way binding

【讨论】：