1

我正在使用 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始终未定义。如何让它工作？

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

4

1 回答 1

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。

于 2017-06-22T06:15:09.217 回答