角度材料ダイアログ：常にウィンドウの右下に位置

Question

ウィンドウの右下に常に配置されたウェブページ上の角度材料ダイアログ（何らかの目的でパネルとして使用する）を使用しようとしています。

1 - 私はページ上で正常にスクロールすることはできませんよ。

私は2つの問題があります

https://plnkr.co/edit/lpFH2L?p=preview

$mdDialog.show({ 
     controller: function($scope, $mdDialog){ 
     // do something with dialog scope 
     }, 
     template: '<md-dialog aria-label="My Dialog" style="position: absolute; bottom: 0; right: 0;">'+ 
        '<md-dialog-content class="sticky-container">Blah Blah' + 
        '</md-dialog-content>' + 
        '<md-button ng-click=close()>Close</md-button>' + 
        '</md-dialog>', 
     targetEvent: elementWrapper, 
     hasBackdrop: false 
    }); 
    }; 

次

のようなものを実装しました。スクロールがロックされます。 2スクロールが有効になっていても、位置を絶対値に設定してスクロールダウンすると、ダイアログは下部に留まりません（スクロールしなくても前の位置に留まります）。

マテリアルを使用してこのようなダイアログパネルを作成し、Googleハングアウトチャットパネル（これはまったく同じように動作します）のようなものを作成する最も良い方法は何ですか？ $mdToastを使用して、より良い解決策ではないかもしれない場合

Answer 1

のだろうか - しかし、注意すべきCodePen

ことの一つは、あなたの質問に「右下」を言うことですが、あなたのデモは、右上にあるダイアログが表示されます。

マークアップ

<div ng-controller="AppCtrl" class="inset toastdemoCustomUsage" ng-cloak="" layout-padding ng-app="MyApp"> 
    <md-button ng-click="showCustomToast()" class="md-raised" style="padding-left: 10px;padding-right: 10px;"> 
    Open 
    </md-button> 

    <script type="text/ng-template" id="toast-template.html"><md-toast> 
    <span class="md-toast-text" flex>Blah blah</span> 
    <md-button ng-click="closeToast()"> 
    Close 
    </md-button> 
</md-toast> 
</script></div> 

JS

(function() { 

    var isDlgOpen; 

    angular 
    .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
    .controller('AppCtrl', function($scope, $mdToast) { 
     $scope.showCustomToast = function() { 
     $mdToast.show({ 
      hideDelay : 0, 
      position : 'top right', 
      controller : 'ToastCtrl', 
      templateUrl : 'toast-template.html' 
     }); 
     }; 
    }) 
    .controller('ToastCtrl', function($scope, $mdToast, $mdDialog) { 

     $scope.closeToast = function() { 
     if (isDlgOpen) return; 

     $mdToast 
      .hide() 
      .then(function() { 
      isDlgOpen = false; 
      }); 
     }; 
    }); 

})(); 

情報：

https://material.angularjs.org/latest/demo/toast https://material.angularjs.org/latest/api/service/ $ mdToast