为什么 Angular Material ngToast 会使页面跳转？答案

【问题标题】：Why Angular Material ngToast makes the page jump?为什么 Angular Material ngToast 会使页面跳转？
【发布时间】：2016-08-12 13:47:17
【问题描述】：

我想让我的 toast 出现在用户已经位于页面上的位置（在他已经在浏览器中看到的视图中）。但不知何故，每次吐司出现时，页面都会跳转到其他位置。

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

请查看以下演示链接（向下滚动并单击“显示 Toast”按钮：ngToast Example

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

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

我该如何解决这个问题？

谢谢。

【问题讨论】：

标签： angularjs angular-material ngtoast

【解决方案1】：

关于您在下面的评论，这里是一个包含吐司的示例（在卡片中）-CodePen

如果你给你的卡片一个id，你可以将toast parent 设置为具有该id 的元素：

$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>

【讨论】：

感谢 camden_kid，但这对我没有帮助。因为我不想总是显示按钮。在我的应用程序中，当有人单击这些卡片上的按钮时，我有几张带有按钮的卡片（例如 Facebook），我不希望吐司使页面跳转。
@iseif 明白了。这是一个有趣的问题。一定有办法做到这一点，因为演示页面做到了 - material.angularjs.org/latest/demo/toast。吐司包含在其卡片中，不会出现在页面的右上角。 Toast 文档暗示了一种方法 - material.angularjs.org/latest/api/service/$mdToast - 但我无法弄清楚。
我也尝试按照他们的方式实现它，但没有成功。顺便说一句，如果您将 '.position('top right')' 更改为 '.position('bottom right')' - 你会遇到一个有线问题，toast 将出现在第一个 'view' 的底部页面。
@iseif 我已经更新了答案。希望能帮助到你。如果没有，请告诉我。 :-)
感谢尝试，但是如果Toast Parent的div向下滚动，那么它也会跳到顶部。

【解决方案2】：

我从 Angular Material GitHub 询问了这些人，这是他们提供的答案：

这是一个已知问题，我们希望通过重写 toast（和其他一些弹出组件）。

与此同时，这里有一个简单的解决方法： Codepen Example

基本上，您创建一个容器（Codepen 中的#toast-container）仅与视口一样大，并使其成为吐司。

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

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

谢谢。

【讨论】：