Проблема области действия - вложенный $ mdDialog в контроллере на основе классов - PullRequest
Новая
       47

Проблема области действия - вложенный $ mdDialog в контроллере на основе классов

2 голосов
/ 23 мая 2019

Я перевожу свои контроллеры AngularJS к модели на основе классов, чтобы поддержать несколько новых идей, появившихся в последнее время.Это вызвало проблему с использованием службы 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.itemData была переписана внутри строки this._mdDialog.show () .Кажется, что есть проблема с ограничением объема, и ничто из того, что я пробовал, успешно не обращается к этой переменной.Я пытался внедрить $ scope, перенаправить на внешнюю функцию, даже получить доступ к данным через angular.element (). Controller (), но я ничего не добился.

Что я делаю не так?

1 Ответ

0 голосов
/ 28 мая 2019

В итоге я перевел свой контроллер на гибридный подход и включил $ 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() {});
    }
  }
})();
...