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

Question

我正在使用一个应用程序控制器调用一个模型 window，我想将数据从 $mdDialog 模型 window 传递到应用程序控制器。我该怎么做？

//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: 从 Parent 传递到 Child $emit: 从 Child 传递到 Parent。

如果您在使用不同的组件时使用相同的控制器和不同的组件，并且控制器不会更新 parent 或 child 范围，则以上内容将很有用，结果您无法显示更新值。

可以提供帮助的是使用我已经用于通信的控制器进行绑定。

解决方法：

已弹出以显示任何控制器都可以使用的不同组件：

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

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

public getSelectedFields: any;

on Popup close assigning values to getBackItems 它会立即反映到 parent controller 因为它是 two way binding

Answer 2

从 $mdDialog window 到 return 值的直接方法是使用它 returns:

的承诺

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

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

Pass data from $mdDialog Child Component to Parent Component

angularjs

typescript

angularjs-material