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

以下是您的问题的工作示例

试试这个

＆＃13;

<!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>

＆＃13;

ng-hide不使用滚动事件

1 个答案: