스크롤 이벤트에서 ng-hide가 작동하지 않습니다.

스크롤 이벤트에서 ng-hide를 사용하려고했습니다. 나는 이것을 다음과 같이 사용하고 있습니다 :스크롤 이벤트에서 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 숨기고 진홍색하지 않습니다 수 스크롤에 호출되는 함수가 하나도 나타나지 않습니다.

도움이 될 것입니다! 여기

출처

2017-05-19 Himanshu Chandra

u는 간단한 바이올린을 만들 수 있습니다 시도인가? –

가 문제

의 작업 예제는이

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

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

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

 

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

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

 

 
</html>

출처

2017-05-19 05:43:17

예, 고맙습니다. 하지만 왜 내가 $ apply 및 $$ 단계를 사용해야하는지 설명 할 수 있습니까? –

@HimanshuChandra는 https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply() 및 https://www.sitepoint.com/understanding -angulars-apply-digest / –

스크롤 이벤트에서 ng-hide가 작동하지 않습니다.

답변

관련 문제