なぜ角度材料ngToastがページをジャンプさせるのですか？

Question

私は自分のトーストを、ユーザーがすでにページに置かれている位置（ブラウザで既に表示されているビュー）に表示したいと思っています。しかし、どういうわけか、トーストが表示されるたびにページが別の位置にジャンプしています。

index.htmlを

<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-app="MyApp"> 

    <div ng-repeat="n in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16, 17, 18, 19, 20]"> 
    <p>{{$index}}</p> 
    </div> 

    <div layout="row" layout-sm="column" layout-align="space-around"> 
     <md-button ng-click="showToast()"> 
     Show Toast 
     </md-button> 
    </div> 
</div> 

app.js

angular.module('MyApp') 
.controller('AppCtrl', function($scope, $mdToast) { 
    $scope.showToast = function() { 
    $mdToast.show($mdToast.simple().position('top right').textContent('Hello!')); 
    }; 
}) 

スクロールダウンし、 'ショートースト' ボタンをクリックしてください（デモでは、次のリンクを参照してください：ngToast Example

私はトーストを現在のビューの一番上に表示し、表示されるたびにページの先頭にジャンプしないようにします。

ところで、私がトーストポジションを「右下」に変更すると、トーストは、ユーザーが見ているセクションの右下ではなく、最初のビューの右下に表示されます。

どうすれば修正できますか？

ありがとうございました。あなたのカード（複数可）を使用すると、要素にトースト親を設定することができIDを与える場合CodePen

- ここでは、以下のコメントに関して

Answer 1

私は角材質のGitHubから人を尋ね、ここで彼らが提供する答えは次のとおりです。

これは、我々は トーストの書き換え（および他のいくつかのポップアップコンポーネント）で解決することを願ってい既知の問題です。一方

は、ここでは簡単な回避策です： Codepen Example

基本的には、ビューポートのみと同じ大きさの容器（Codepenに＃トーストコンテナ） を作成し、その親作りますトーストの ここで

HTML

<div id="toast-container"></div> 
<div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-app="MyApp"> 

    <div ng-repeat="n in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15, 16, 17, 18, 19, 20]"> 
    <p>{{$index}}</p> 
    </div> 

    <div layout="row" layout-sm="column" layout-align="space-around"> 
     <md-button ng-click="showToast()"> 
     Show Toast 
     </md-button> 
    </div> 
</div> 

CSS

#toast-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(255, 0, 0, 0.2); 
} 

JS

angular.module('MyApp') 
.controller('AppCtrl', function($scope, $mdToast) { 
    $scope.showToast = function() { 
    $mdToast.show($mdToast.simple().position('bottom right').textContent('Hello!').hideDelay(10000).parent(document.getElementById('toast-container'))); 
    }; 
}) 

は私がそこに開かれた問題である：Angular Material Issue

ありがとうございます。

Answer 2

は（カードで）乾杯を含む例です

JS

$scope.showCustomToast = function() { 
    $mdToast.show({ 
     hideDelay : 3000, 
     position : 'top right', 
     controller : 'ToastCtrl', 
     templateUrl : 'toast-template.html', 
     parent: $element[0].querySelector('#blah') 
    }); 
}; 

マークアップ

<div id="blah" style="width:400px; height:400px; background:yellow">Toast parent</div> 

：そのIDを持ちます