AngularJS - ngRepeat 용 프리 로더

Question

ng-repeat과 함께 무한 스크롤 기술을 사용하고 있습니다. 지시어가 항목을 DOM에 추가하는 것을 완료 할 때까지 프리 로더를 표시하려고합니다. 그것을 달성하는 가장 간단한 방법은 무엇입니까?

Answer 1

시험해보기. live DEMO 참조 용으로 설정되었습니다.

무한 스크롤 구현에 따라 다릅니다. 그리고 가장 좋은 대답은 plunker 또는 jsbin을 설정해야합니다.

하지만 로더를 설정하고 ng-if 지시문을 사용하면 항목 컨테이너가 비어있는 동안에 만 표시 할 수 있습니까?

우리가 여기

<div id="data-container" when-scrolled="loadMore()"> 
    <img ng-if="!items.length" ng-src="http://placehold.it/100x395&text=Loading"> 
    <div class="item" ng-repeat="item in items">{{item.id}}</div> 
    <img ng-if="items.length && busy" ng-src="http://placehold.it/85x50&text=Loading"> 
</div> 

when-scrolled 같은 템플릿을 상상하는 것은 바로 스크롤 위치를 모니터링하고 더 많은 항목을로드 할 때 때 제공된 처리기를 호출 우리의 무한 스크롤 지시자입니다.

app.directive('whenScrolled', function() { 
    return function(scope, element, attr) { 
    var containerNode = element[0]; 
    element.bind('scroll', function() { 
     if (containerNode.scrollTop + containerNode.offsetHeight >= containerNode.scrollHeight) { 
     scope.$apply(attr.whenScrolled); 
     } 
    }); 
    }; 
}); 

처리기가 내용 영역의 맨 아래에 도달하면 처리기가 호출됩니다.

$scope.items = []; 
$scope.busy = false; 

$scope.loadMore = function() { 
    if (true === $scope.busy) { 
    return; 
    } 
    $scope.busy = true; 
    $timeout(function() { 
    var currentLength = $scope.items.length; 
    for (var i = currentLength; i < currentLength + 10; i++) { 
     $scope.items.push({id: i + 1}); 
    } 
    $scope.busy = false; 
    }, 350); // Imitating the long remote request. 
}; 

우리는 먼저 $scope.items를 초기화하고 그것의 길이가 0 인 동안 "!items.length"에 해당하는 동안이 표시 될 때 로딩 이미지는 템플릿에 표시됩니다 : 컨트롤러의

loadMore() 방법은 다음과 같이 정의 할 수 있습니다. 첫 번째 항목이 콜렉션에 추가되면 프리 로더가 숨겨집니다.

그러면 로컬 로딩 이미지가 표시되며 회 전자 또는 원하는대로 바꿀 수 있습니다. 그러면 $scope.busy var이 true으로 설정되고 false 일 때 숨겨집니다. 동기화 요청의 시작과 끝에서 $scope.busy 값을 변경합니다. 타임 아웃은 간단한 비동기 요청 데모에 사용됩니다.