要素のアンギュラウォッチが動作しない

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){...});