Открытие и закрытие нескольких нижних листов углового материала

Вот сценарий, над которым я работаю:

  1. Бизнес-логика нашего веб-приложения требует открытия ряда диалогов один над другим и закрытия их один за другим (как обычный стек диалогового интерфейса пользовательского интерфейса).
  2. Это прекрасно работает с mdDialog, используя параметр multiple: true
  3. Мы планируем преобразовать диалоги в скользящие панели (справа, если это имеет значение), и после использования CSS-махинаций мы изменили цель mdBottomSheet для этого (это было наиболее полезно для нашего варианта использования, даже если оно изначально открывается из снизу, а не справа)
  4. Он работает с multiple: true, как и ожидалось, так как это повторно предназначенный mdDialog (даже если он не задокументирован должным образом), но он вызывает серьезную проблему ...

Проблема. Предположим, вы открыли главное диалоговое окно, а затем - дополнительное. Когда вы закрываете вторичный, он закрывает и главный, что не является ожидаемым результатом. По сути, закрытие вложенного диалогового окна закрывает основной диалог (и все остальные вложенные диалоговые окна, если на то пошло).

Мы нашли решение, использующее параметр preserveScope: true, но он приводит к серьезной утечке ресурсов, поскольку сохраняет неактуальные области закрытых диалогов без изменений и работает со всеми связанными проблемами (ошибочная логика, ненужные наблюдатели, ошибки на misisng элементы DOM и т. д.). Попытка выборочно убить любую из остаточных областей видимости после закрытия диалогового окна уничтожает все еще открытые диалоговые окна (так же, как наличие _7 _...)

Итак, по сути, мы ищем способ съесть торт и тоже его съесть - иметь как функцию «нижнего листа», скользящую справа, так и работу с несколькими диалогами, как в обычном диалоге.

Кстати, есть просьбы к команде Angular Material реализовать такую ​​функциональность должным образом, но пока она застряла в подвешенном состоянии ...

Я хотел бы получить несколько интересных идей, если вы знаете о них или можете придумать какие-либо (мы находимся на грани того, чтобы сделать mdDialog похожим на mdBottomSheet [таким образом, по сути, повторно реализуя его сами], либо повторно внедряем Redux для AngularJS для управления состояния диалога - и я бы очень, очень хотел бы избежать ни того, ни другого :)).

Версии: AngularJS (angular 1.6.6) и Angular Material (angular-material 1.1.5)


angularjs angular-material mddialog
person st2rseeker    schedule 25.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, реальное решение, которое я нашел, заключалось в том, чтобы отредактировать определение MdBottomSheetDirective и удалить прослушиватель событий $destroy.

Итак, вместо:

/* @ngInject */
function MdBottomSheetDirective($mdBottomSheet) {
  return {
    restrict: 'E',
    link : function postLink(scope, element) {
      element.addClass('_md');     // private md component indicator for styling

      // When navigation force destroys an interimElement, then
      // listen and $destroy() that interim instance...
      scope.$on('$destroy', function() {
        $mdBottomSheet.destroy();
      });
    }
  };
}

Я использую:

/* @ngInject */
function MdBottomSheetDirective($mdBottomSheet) {
  return {
    restrict: 'E',
    link : function postLink(scope, element) {
      element.addClass('_md');     // private md component indicator for styling
    }
  };
}

Как ни странно, он работает полностью так, как требуется, без побочных эффектов (т.е. закрываемое диалоговое окно закрывается с уничтоженной областью действия и никакие другие диалоговые окна не затрагиваются) - даже при навигации в веб-приложении.

Если у кого-то есть идеи, почему это работает - буду очень признателен, если вы прокомментируете.

person st2rseeker    schedule 26.10.2017