为什么棱角材料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实例

我希望祝酒词出现在当前视图的顶部，而不是每次出现时跳到页面的顶部。

顺便说一下，如果我将吐司位置更改为“右下角”--吐司出现在第一个视图的右下角，而不是出现在用户正在查看的区域的右下角。

我怎么才能解决这个问题？

谢谢。

Answer 1

我问了来自棱角材料GitHub的人，下面是他们提供的答案：

这是一个已知的问题，我们希望通过重写吐司(和一些其他弹出式组件)来解决。 同时，这里有一个简单的解决方法：Codepen示例 基本上，您创建了一个容器(# you容器在Codepen中)，它与viewport一样大，并使它成为吐司的父级。

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')));
  };
})

这里是我在那里打开的问题：角材料问题

谢谢。

Answer 2

关于您下面的评论，这里是一个包含吐司(在卡片中)- CodePen的例子。

如果您给您的卡提供了一个id，您可以使用该id将土司父级设置为元素：

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>