角度のあるJSでスクロール指示が機能しない

Question

ごめんなさい。私は角度のJSに新しいです。私はhttp://jsfiddle.net/88TzF/622/から素敵な小さなスクロールディレクティブを見つけました。しかし、それが機能していない私は、以下のHTMLを作成するときに ドロップダウン例は

 <ul class="dropdown-menu Container" scroll> 
       <div > 
      <li ng-repeat="i in items"><a href="#">{{i.value}}</a></li> 
        </div> 
     </ul> 


     </div> 

しかし、焼成あれば、私はjQueryのウェイスクロールイベントを行います。どうしたらいいのか教えてください。

アイテム配列には700以上のオブジェクトがあります。それはあふれている。

.Container 
{ 
    height: 300px; 
    overflow: scroll; 
} 

ありがとうございます。

Answer 1

あなたはウィンドウにスクロールイベントをバインドしていますが、私はあなたがドロップダウンコンテナをスクロールしていると仮定しますか？

この場合、スクロールイベントをドロップダウンコンテナにバインドし、if文でthis.scrollTopをチェックする必要があります。

ただし、角度は自分では処理できないため、スクロールイベントのバインドを解除することを忘れないでください。

app = angular.module('myApp', []); 
 
    app.directive("scroll", function ($window) { 
 
     return function(scope, element, attrs) { 
 
      element.on("scroll", function() { 
 
       if (this.scrollTop >= 100) { 
 
        scope.boolChangeClass = true; 
 
        console.log('Scrolled below header.'); 
 
       } else { 
 
        scope.boolChangeClass = false; 
 
        console.log('Header is in view.'); 
 
       } 
 
       scope.$apply(); // Prefer scope.$digest()! 
 
      }); 
 
     
 
     scope.$on('$destroy', function() { 
 
      element.off('scroll'); 
 
     }); 
 
     }; 
 
    });

.dropdown-container { 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div ng-app="myApp" class="test"> 
 
    <div class="dropdown-container" scroll> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
     <li><a href="#">test</a></li> 
 
    </ul> 
 
    </div> 
 
</div>