0

我正在使用 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) {
    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,
      preserveScope: true,
      targetEvent: ev,
      clickOutsideToClose: true,
      fullscreen: true
    });
  }

现在的问题是使用$ctrl. 例如$ctrl.hideDialog()，, $ctrl.cancelDialog()and even$ctrl.settingType是未定义的。实际上，$ctrl在视图中打印为空对象。但是，$log.log(this.settingType);在对话框控制器的构造函数中记录了正确的settingType. 我该如何解决？

编辑 1： _this.$scope 是可访问的，这是它的控制台日志截图： 在此处输入图像描述

编辑 2：问题已解决，我在CommentReplySettings 对话框视图md-truncate中使用指令。就像。一旦我将其更改为，一切正常。请参阅github.com/angular/material/issues/10356。<h2 flex md-truncate>Comment Response {{$ctrl.settingType}} Settings</h2><h2 flex class="md-truncate">Comment Response {{$ctrl.settingType}} Settings</h2>

4

2 回答 2

0

发现问题，我md-truncate在CommentReplySettings 对话框视图中使用。就像<h2 flex md-truncate>Comment Response {{$ctrl.settingType}} Settings</h2>。一旦我将其更改为<h2 flex class="md-truncate">Comment Response {{$ctrl.settingType}} Settings</h2>，一切正常。请参阅github.com/angular/material/issues/10356。

于 2017-06-30T09:10:24.497 回答
0 
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,
    scope: this.scope,
    preserveScope: true,
    targetEvent: ev,
    clickOutsideToClose: true,
    fullscreen: true,
    controllerAs: 'ctrl' <--Added
  });
}

添加controllerAs: 'ctrl'如上。希望能帮助到你

于 2017-06-30T07:38:22.437 回答