ng-hide ne fonctionne pas avec l'événement de défilement

J'ai essayé d'utiliser ng-hide dans les événements de défilement. Je l'utilise comme cecing-hide ne fonctionne pas avec l'événement de défilement

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);

});

et index.html j'ai cette

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

La chose est la fonction est appelée à défilement que je peux voir le Hide Crimson et Masquer blanc dans la console, mais la div Blanc ne cache pas et pourpre on n'apparaît pas.

Toute aide serait appréciée !!

Source

2017-05-19 Himanshu Chandra

peut u créer un violon simple? –

Voici un exemple de travail de votre problème

Essayez cette

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

Source

2017-05-19 05:43:17

ouais, cela a fonctionné merci! mais pouvez-vous expliquer pourquoi ai-je besoin d'utiliser $ apply et $$ phase? –

@HimanshuChandra obtenu à travers ces liens https://github.com/angular/angular.js/wiki/When-to-use-$scope.$apply() et https://www.sitepoint.com/understanding -angulars-apply-digest / –

ng-hide ne fonctionne pas avec l'événement de défilement

Répondre

Questions connexes