2017-10-25 14 views
0

ここでは、私が働いているシナリオを行く:開閉複数の角度素材ボトムシート

  1. 当社のウェブアプリケーションのビジネスロジックが必要です(ダイアログ別の上に1の数を開き、一つずつを閉じます
  2. )通常のダイアログのUIスタックのようにこれは重要な場合我々は、右から(スライドパネルにダイアログを変換するに見ている)とCSSのペテンを使用した後、我々は再びきた multiple: trueオプション
  3. を使用してmdDialogで見事に動作しますそのためにmdBottomSheetを使いました(私たちの使用に最も便利でした。たとえそれがもともと下から右からではなくても開いていても)
  4. mdDialog(それが正しく文書化されていなくても)それは重要な問題を紹介しているので、期待通りにmultiple: trueと動作します...

問題:メインダイアログを開き、次にセカンダリを開いたとします。セカンダリを閉じると、メインも閉じますが、これは意図した結果ではありません。基本的には、サブダイアログを閉じると、メインダイアログ(およびその他のすべてのサブダイアログも同様です)が閉じられます。

私たちが見つけた解決策は、preserveScope: trueオプションを使用していますが、閉じたダイアログの関連性のないスコープをそのまま維持し、関連するすべての問題(不完全なロジック、不必要なウォッチャー、誤ったDOM要素のエラーなど)。ダイアログが閉じた後に残っているスコープを選択的に消去しようとすると、まだ開いているダイアログがすべて失われます(preserveScope: false ...と同じです)

これは基本的にケーキを食べて食べる方法を探しています。あまりにも - 右からスライドする "ボトムシート"の機能と、通常のダイアログのように複数のダイアログで機能するという両方の機能があります。ところで

、適切な機能を実装するための角度マテリアルチームの要求がありますが、今のところ、それはあなたができるようにを知っている場合や、

私は、いくつかの興味深いアイデアをしたいと思います...開発どっちつかずの状態で立ち往生していますどんなものか考えてみてください。mdBottomSheetのように見えるので、AnglesJSのためにReduxを再実装してダイアログの状態を管理してください。本当にどちらかを避けたいと思っています:) )。

バージョン: AngularJS(角1.6.6)と角度材料(角-材料1.1.5)

答えて

0

OK、私が見つけた実際のソリューションは、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 
    } 
    }; 
} 

を驚いたことになし副作用で必要に応じてクローズするダイアログがで閉じられている。すなわち、それは(完全に動作しますスコープが破壊され、他のダイアログは影響を受けません) - Webアプリ内をナビゲートしていても。

誰かがそれがなぜ機能するのか分かっていれば、あなたがコメントすれば大いに義務づけられます。

関連する問題