Передайте данные компоненту, показанному с помощью $mdDialog

Я использую 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
    });
  }

Проблема в том, что this.settingType внутри CommentReplySettingsController всегда не определен. Как заставить это работать?

Изменить: если я использую settingType: '@' в CommentReplySettingsController и выполняю setting-type="global" в функции showCommentReplySettingDialog выше , значение в привязке settingsType задано правильно. Похоже, $ctrl становится неопределенным при использовании внутреннего шаблона. Какой-либо причине?


angularjs angular-material angular-components mddialog
person Samar Rizvi    schedule 22.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема заключалась в том, что $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.

person Samar Rizvi    schedule 22.06.2017