[英]Scroll Directive Not Working in Angular JS
很抱歉這個愚蠢的問題。 我是棱角JS的新手。 我從http://jsfiddle.net/88TzF/622/找到了一個不錯的小滾動指令,但是當我創建下面的HTML Dropdown示例時它不起作用
<ul class="dropdown-menu Container" scroll>
<div >
<li ng-repeat="i in items"><a href="#">{{i.value}}</a></li>
</div>
</ul>
</div>
但是如果我觸發時執行jQuery Way滾動事件。 你能讓我知道怎么了嗎?
Items數組有700多個對象。 所以它溢出了。
.Container
{
height: 300px;
overflow: scroll;
}
提前致謝。
您將滾動事件綁定到窗口,但是我假設您正在滾動下拉容器?
如果是這種情況,則必須將滾動事件綁定到下拉容器,並在if語句中檢查this.scrollTop
。
但是,別忘了取消綁定滾動事件,因為angular將無法自行處理。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.