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

Question

我正在使用 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 变得不确定。有什么原因吗？

Answer 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.

的其他解决方案

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

Pass data to component shown using $mdDialog

angularjs

angular-material

mddialog

angular-components