요소의 각도보기가 작동하지 않습니다.

Question

나는 요소가 보이면 경고를 표시하기 위해 희미한 $watch을 사용하고 있습니다.

var scrollElement = "#hiddenObj"; 
$scope.$watch(function() { return $(scrollElement).is(':visible') }, function() { 
    alert('hi); 
}); 

문제는 경고, 요소가 기본적으로 숨겨져 있지만 페이지로드에 페이지로드에 표시되며, 일부 링크의 클릭에 표시되어 있습니다.

그냥 내 가정을 확인하기

은, 난 그냥이 코드 전에 브레이크 포인트를 넣어, 내 콘솔에서이 코드를 실행 :

$(scrollElement).is(':visible') 

을하고 false을 반환합니다. 즉, 요소가 페이지로드시 보이지 않습니다. 왜 경고가 여전히 페이지로드에 표시되는지 모르겠습니다. 링크를 클릭하면 scrollElement이 실제로 표시되며 아무런 반응이 없습니다.

내가 여기에없는 것이 있습니까?

Answer 1

시계 리스너 콜백이 될 것입니다 watchExpression이 변경 될 때마다 실행됩니다. 일 때가 아니라 true/false 일 때가 아닙니다. 따라서 페이지가로드 될 때 watchExpression 값은 false이고 수신기가 실행됩니다. 이를 방지하려면 watchExpression의 새로운 가치를 확인할 수 있습니다

$scope.$watch(function() { return $(scrollElement).is(':visible') }, function(newVal) { 
    if(newVal === true) { 

     alert('Element showed'); 
    }  
}); 

두 번째 문제는 watchExpression가 $digest() 호출 할 때마다 호출된다는 것이다. 따라서 클릭 핸들러 (요소 표시/숨기기)는 표현식을 평가하기 위해 $ 다이제스트주기를 트리거해야합니다. ng-click은 좋은 아이디어입니다. 귀하의 경우에는

가 watchExpression은 다음과 같습니다

function() { return $(scrollElement).is(':visible') } 

Answer 2

이 물건은 $ scope.elemVisible 같은 범위 변수를 변경 지시에 코딩해야

.directive("visible",function(){ 
return{ 
    restrict:"AE", 
    scope:{yourVarName:'='}, 
    link:function(scope,elem,attrs){ 
    $(window).scroll(function(ev){//if you want to do something on scroll 
     var vis=$(elem).is(':visible'); 
     scope.yourVarName=vis; 
     scope.$apply(); 
    }); 
    $(someElement).bind('click',function(ev){// or if you want do something on click 
     var vis=$(elem).is(':visible'); 
     scope.yourVarName=vis; 
     scope.$apply(); 
    }); 
    } 
} 
}) 

HTML

<visible yourVarName="isVisible"/> 

컨트롤러는

$scope.$watch('isVisible',function(newVal,oldVal){...});