ng-hide 不适用于滚动事件

Question

我一直在尝试在滚动事件上使用 ng-hide。我是这样用的

angular.module('myApp')
.controller('MyCtrl', function ($scope,$window) {

$scope.name={
  White:false,
  Crimson:true
}

  $scope.swapColor=function(){
    if($window.scrollY>648){
      console.log("Hide White");
        $scope.name.White=true;
        $scope.name.Crimson=false;
    }
    else{
      console.log("Hide Crimson");
      $scope.name.White=false;
      $scope.name.Crimson=true;
    }
  }

  angular.element($window).on('scroll',$scope.swapColor);

});

在 index.html 我有这个

<div ng-hide="name.White"><img src="images/nameWhite.png" class="img-responsive nameWhite"></div>
<div ng-hide="name.Crimson"><img src="images/nameCrimson.png" class="img-responsive nameCrimson"></div>

问题是该函数在滚动时被调用，因为我可以在控制台中看到隐藏深红色和隐藏白色，但是白色 div 没有隐藏，深红色也没有出现。

如有任何帮助，我们将不胜感激！！

Answer 1

这是您的问题的一个工作示例

试试这个

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 <script type="text/javascript">
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope,$window) {
   $scope.name={
    White:false,
    Crimson:true
   }

   $scope.swapColor=function(){
    if($window.scrollY>648){
     //console.log("Hide White");
     $scope.name.White=true;
     $scope.name.Crimson=false;
    }
    else{
     //console.log("Hide Crimson");
     $scope.name.White=false;
     $scope.name.Crimson=true;
    }
    if (!$scope.$$phase) {
     $scope.$apply();
    }
   }

   angular.element($window).on('scroll',$scope.swapColor);
  });


 </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" style="height: 2470px">

 <div ng-hide="name.White" style="position: fixed;">
  IMG 1
 </div>
 <div ng-hide="name.Crimson" style="position: fixed;">
  IMG 2
 </div>
</body>


</html>

ng-hide 不适用于滚动事件

ng-hide isn't working with scroll event

scroll

angularjs

ng-hide