gpt4 book ai didi

javascript - angularjs:动态更改样式失败

转载 作者:行者123 更新时间:2023-11-27 23:28:17 24 4
gpt4 key购买 nike

我遇到一个问题,一个div是由controller中设置的一个值控制的,如果值为true,则显示它,如果值为false,则隐藏它。该值由滚动事件控制。 html代码如下:

<body ng-app="app" ng-controller="controller">
<div class="round" ng-style="{'display':isRoundShow?'inline':'none'}"></div>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
<h1>Hello Plunker!</h1>
</body>

Controller 部分如下:

angular.module('app', [])

.controller('controller', function($scope) {
$scope.isRoundShow = false;

window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > 50) {
$scope.isRoundShow = true;
}else{
$scope.isRoundShow = false;
}
}
})

CSS 定义是:

.round {
width : 40px;
height: 40px;
background-color: #FF0000;
border-radius: 50%;
position: fixed;
left: 10px;
top: 10px;
}

现在我想知道为什么当我滚动时,圆形 div 从不显示,我在这里建立了一个 plunker : https://plnkr.co/edit/u8RHyCMYRR5L8BwouOkg?p=preview

最佳答案

这是因为您正在将值作为 DOM 事件的一部分进行更改,而 Angular 中的摘要循环未触发。我建议找到一种更好的方法来以“Angular”的方式来完成您想在此处实现的目标,但是现在,您可以按照我的 fork 使用 $apply() 强制进行摘要:

https://plnkr.co/edit/ihbiRtGebrIH81uqa6L3?p=preview

关于javascript - angularjs:动态更改样式失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37296156/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com