滚动指令在Angular JS中不起作用

Question

很抱歉这个愚蠢的问题。 我是棱角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;
}

提前致谢。

Answer 1

您将滚动事件绑定到窗口，但是我假设您正在滚动下拉容器？

如果是这种情况，则必须将滚动事件绑定到下拉容器，并在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>