angularjs - 为什么Angular Material ngToast会让页面跳转？

Question

我想让我的 toast 显示在用户已经位于页面上的位置(在他已经在浏览器中看到的 View 中)。但不知何故，每次出现 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 出现在当前 View 的顶部，而不是每次出现时都跳到页面顶部。

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

我该如何解决这个问题？

谢谢。

Answer 1

关于您的评论，下面是包含 toast (在卡片中)的示例 - CodePen

如果您为卡片指定一个 id，您可以将 toast 父级设置为具有该 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>