Question

我遇到了一个问题，div由控制器中设置的值控制，如果值为true，则显示它，值为false，然后隐藏它。该值由scroll事件控制。 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

Answer 1

这是因为您正在将值更改为DOM事件的一部分，并且角度中的摘要循环不会触发。我建议找到一种更好的方法，以“Angular”方式完成您想要实现的目标，但是现在，您可以使用$apply()强制摘要，根据我的分叉：

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

angularjs：动态变化风格失败

1 个答案: