范围问题 - 在基于 class 的控制器中嵌套 $mdDialog

Question

我正在将我的 AngularJS 控制器转移到基于 class 的模型，以支持最近出现的一些新想法。这在使用 AngularJS Materials $mdDialog 服务时出现了问题，我遇到了问题。

我有一个设置，其中一个父对话框打开，另一个在用户想要撤消他们所做的任何更改时执行确认步骤。

家长对话框代码：

// Expand item data
expandItem(data, ev){
  this._mdDialog.show({
    controller: 'expandCtrl',
    controllerAs: 'ec',
    templateUrl: 'path/to/template',
    parent: angular.element( document.body ),
    targetEvent: ev,
    clickOutsideToClose: true,
    locals: { 
      data: {
        asset: data,
        table: this.selectTable
      }}
  }).then(rowData => {
  }, function(){});
}

嵌套对话框代码：

(function () {
'use strict';
class expandCtrl {

  constructor($mdDialog, data) {
    this.itemData = data;
    this.itemStateCapture = angular.copy(this.itemData);
    this._mdDialog = $mdDialog;
  }

  // Cancel edits and revert item back to its previous state
  cancelEdits(ev) {

    let cancelConfirm = this._mdDialog.confirm()
    .multiple(true)
    .title('Are you sure?')
    .textContent('Really cancel all edits and revert this item back to its original state?')
    .ariaLabel('Edit cancel confirmation')
    .targetEvent(ev)
    .ok('Cancel Edits!')
    .cancel('Go Back');

    this._mdDialog.show(cancelConfirm).then(function() {

      //**************************//
      //**** The Problem Line ****//
      //**************************//
      this.itemData = this.itemStateCapture;

    }, function() {});
  }
}
// Init Controller
angular.module('dbProject').controller('expandCtrl', expandCtrl);

})();

我需要在 this._mdDialog.show() 中重写顶层 this.itemData 变量线。虽然似乎存在范围界定问题，但我没有尝试成功访问该变量。我试过注入 $scope，重定向到外部函数，甚至通过 angular.element().controller() 访问数据，但我没有取得任何进展。

我做错了什么？

Answer 1

我最终将我的控制器转换为一种混合方法，并包括 $scope。没有它 $mdDialog 似乎无法正常运行（尽管我很想被证明是错误的）。

见下文：

(function () {
'use strict';
  angular
    .module('myProject')
    .controller('expandCtrl', expandCtrl);

    expandCtrl.$inject = [
      '$mdDialog',
      '$timeout',
      '$scope',
      'data',
      'uaService',
      'dataService'
    ];

    function expandCtrl($mdDialog, $timeout, $scope, data, uaService, dataService){
      // Submit edits functionality
      this.submitEdits = function(table, access, data, ev){
        let confirmSubmit = $mdDialog.confirm()
        .multiple(true)
        .title('Are you sure?')
        .textContent('Really submit these changes?')
        .ariaLabel('Submit confirmation')
        .targetEvent(ev)
        .ok('Submit!')
        .cancel('Go Back');

        $mdDialog.show(confirmSubmit).then(function() {

            let editData = {
                table: $scope.table,
                data: $scope.itemData,
                prevData: $scope.itemStateCapture
            }

            dataService.submitEdits(editData)
            .then(res =>{
                console.log(res);
            }).catch(e =>{console.error(e)})

        }, function() {});
    }
  }
})();

范围问题 - 在基于 class 的控制器中嵌套 $mdDialog

Scope problem - Nested $mdDialog within class based controller

javascript

angularjs

angularjs-scope

angularjs-material

es6-class