我有一个选择框，它将加载超过3k的值。由于更多的价值观，性能受到了影响。所以我试着根据卷轴加载值。但对我来说什么都不管用。
下面的html代码在modal中

<div class="col-md-3">
<select select2 data-placeholder="Program Name(s)" class="form-control scroll" ng- 
model="getProgramName" when-scrolled = "loadMore()" id="scroll" multiple>
<option value="{{progname}}" ng-repeat="progname in segmentList | limitTo:numberToDisplay">
{{progname | splitMak}}
</option>
</select>
</div

js文件：

$scope.openModelrepoName = function (ev, rowObj) {
try {
APIFactory.getAllFuncPackSrcArtifacts(repoNameObj, function (response) {
if (response.status) {
$mdDialog.show({
controller: dataFuntionalPartner,
templateUrl: 'html/templates/dataFunctionalPartner.template.html',
controllerAs: 'vmid',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: false,
fullscreen: $scope.customFullscreen, // Only for -xs, -sm breakpoints.
locals: {
"rowObj": rowObj,
"segmentList" : response.data,
"repoNameObj" : repoNameObj
 }
 })
 } else {
 Toaster.sayError(response.errorMessage)
 }
 })
 } catch (err) { }
 }

 function dataFuntionalPartner($scope, $mdDialog, rowObj,segmentList,repoNameObj) {
 $scope.numberToDisplay = 20;
 $scope.segmentList = segmentList

 $scope.loadMore = function (event) {
 if ($scope.numberToDisplay + 20 < $scope.segmentList.length) {
 $scope.numberToDisplay += 20;
 } else {
 $scope.numberToDisplay = $scope.segmentList.length;
 }
 }

我的指示：

app.directive("whenScrolled", function(){
 return{      
 restrict: 'A',
 link: function(scope, elem, attrs){  
 console.log(elem)    
    // we get a list of elements of size 1 and need the first element
 raw = elem[0];

    // we load more elements when scrolled past a limit
 elem.bind("scroll", function(){
 if(raw.scrollTop+raw.offsetHeight+5 >= raw.scrollHeight){
 scope.loading = true;

 // we can give any function which loads more elements into the list
 scope.$apply(attrs.whenScrolled);
 }
 });
 }
 }
 });

我这里的问题是上面的指令只在初始化时起作用。而且它不工作，任何滚动动作都完成了。