angularjs：动态更改样式失败

debugcn 发表于 Dev

ahwyX100

我遇到了一个问题，一个div是由控制器中设置的值控制的，如果该值为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>

控制器部分如下：

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从不显示，我在这里构建了一个插件：https ://plnkr.co/edit/u8RHyCMYRR5L8BwouOkg ? p = preview

丹尼尔·道斯

这是因为您正在作为DOM事件的一部分来更改值，并且不会触发角度中的摘要循环。我建议找到一种更好的方式以“角度”的方式来完成您要达到的目标，但是就目前而言，您可以$apply()按照我的要求使用来强制进行摘要：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。