Angularjs 为什么有角度的材质会使页面跳跃?
我想让我的祝酒词出现在用户已经在页面上定位的位置(在他已经在浏览器中看到的视图中)。但不知何故,每当祝酒词出现时,页面就会跳转到另一个位置 index.htmlAngularjs 为什么有角度的材质会使页面跳跃?,angularjs,angular-material,ngtoast,Angularjs,Angular Material,Ngtoast,我想让我的祝酒词出现在用户已经在页面上定位的位置(在他已经在浏览器中看到的视图中)。但不知何故,每当祝酒词出现时,页面就会跳转到另一个位置 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,1
<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>
请查看以下带有演示的链接(向下滚动并单击“显示土司”按钮):
我希望toast出现在当前视图的顶部,而不是每次出现都跳到页面顶部
顺便说一句,如果我将土司位置更改为“右下”——土司显示在fist视图的右下角,而不是用户正在查看的部分的右下角
我怎样才能解决这个问题
谢谢。关于您在下面的评论,这里是一个包含吐司(在卡片中)的示例- 如果您为您的卡提供了id,则可以将toast父元素设置为具有该id的元素: JS 加价
<div id="blah" style="width:400px; height:400px; background:yellow">Toast parent</div>
Toast父对象
我询问了角材料GitHub的员工,他们给出了以下答案:
这是一个已知的问题,我们希望通过重写
toast(和一些其他弹出组件)
同时,这里有一个简单的解决方法:
基本上,您可以创建一个容器(代码笔中的toast容器)
它仅与视口一样大,并使其成为视口的父对象
敬酒
HTML
JS
以下是我在那里打开的问题:
谢谢。谢谢camden_kid,但这对我没有帮助。因为我不想总是显示按钮。在我的应用程序中,我有几个带按钮的卡片(类似Facebook)当有人点击这些卡片上的按钮时,我不希望toast使页面跳转。@如果理解的话。这是一个有趣的问题。一定有一种方法可以做到这一点,因为演示页面可以做到-。toast包含在其卡片中,不会出现在页面的右上角。toast文档提示了一种方法,但我可以我还没弄明白。我也试着用他们的方式来实现它,但没有成功。顺便说一句,如果你将“.position('top right')”更改为“.position('bottom right')”-你会得到一个有线问题,祝酒词会出现在页面第一个“view”的底部。@I如果我已经更新了答案,希望有帮助。如果没有,请告诉我。:-)谢谢您的尝试,但是如果Toast父对象的div向下滚动,那么它也会跳到顶部。
$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>
<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>
#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')));
};
})