将数据传递给使用 $mdDialog 显示的组件答案

【问题标题】：Pass data to component shown using $mdDialog将数据传递给使用 $mdDialog 显示的组件
【发布时间】：2017-11-25 04:45:42
【问题描述】：

我正在使用 angular 1.6.2 和 angular-material 1.1.4。这是我用于 $mdDialog 的组件：

class CommentReplySettingsController {
  /** @ngInject */
  constructor($mdDialog, $log) {
    this.$mdDialog = $mdDialog;
    $log.log(this.settingType);
  }

  hideDialog() {
    this.$mdDialog.hide();
  }

  cancelDialog() {
    this.$mdDialog.cancel();
  }
}

export const commentReplySettings = {
  template: require('./comment-reply-settings.html'),
  bindings: {
    settingType: '<'
  },
  controller: CommentReplySettingsController
};

上面转换成这样的组件：

import angular from 'angular';

import {commentReplySettings} from './comment-reply-settings';

export const commentReplySettingsModule = 'commentReplySettings';

angular
  .module(commentReplySettingsModule, [])
  .component('app.user.commentReplySettings', commentReplySettings);

这里是另一个组件的控制器函数，我在 $mdDialog 中使用上述组件：

  showCommentReplySettingDialog(ev) {
    this.settingType = 'global';
    this.$mdDialog.show({
      template: '<app.user.comment-reply-settings class="md-dialog-container" setting-type="$ctrl.settingType"></app.user.comment-reply-settings>',
      parent: angular.element(this.$document.body),
      autoWrap: false,
      targetEvent: ev,
      clickOutsideToClose: true,
      fullscreen: true
    });
  }

问题是 CommentReplySettingsController 中的 this.settingType 始终未定义。如何让它发挥作用？

编辑：如果我在 CommentReplySettingsController 中使用 settingType: '@' 并在 中使用 setting-type="global"上面的showCommentReplySettingDialog函数，settingType绑定中的值设置正确。似乎 $ctrl 在使用内部模板时变得未定义。有什么原因吗？

【问题讨论】：

标签： angularjs angular-material angular-components mddialog

【解决方案1】：

问题是$ctrl 在$scope 中被引用，因此，当我使用scope: this.$scope 时，它工作得非常好：

const _this = this;
this.settingType = 'global';
this.$mdDialog.show({
  template: '<app.user.comment-reply-settings class="md-dialog-container" setting-type="$ctrl.settingType"></app.user.comment-reply-settings>',
  parent: angular.element(this.$document.body),
  autoWrap: false,
  scope: _this.$scope,
  targetEvent: ev,
  clickOutsideToClose: true,
  fullscreen: true
});

但仍然需要通过$scope 似乎有点荒谬。希望有没有没有$scope的其他解决方案。

【讨论】：