Почему угловой материал 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!')); 
    }; 
}) 

Пожалуйста, смотрите ссылку с демо (прокрутите страницу вниз и нажмите на кнопку 'Show Тост': ngToast Example

Я хочу, чтобы тост появлялся в верхней части текущего вида и не переходил в верхнюю часть страницы каждый раз, когда он будет отображаться.

Кстати, если я изменю положение тоста на «внизу справа» - тост появится в правом нижнем углу кулака, а не в правом нижнем углу раздела, который просматривает пользователь.

Как я могу это исправить?

Спасибо.

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

Что касается Вашего комментария ниже здесь приведен пример, содержащего тоста (в картах) - CodePen

Если вы даете карту (ы) в идентификатор вы можете установить тост родитель элемента с этим идентификатором:

JS

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

Markup

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