2014-10-17 6 views
2

지연로드 이미지에 무한 스크롤을 사용하려고합니다.AngularJS 무한 스크롤 문제

형식 오류 : 정의되지 않은 핸들러 (http://onfilm.us/ng-infinite-scroll.js:31:34)에서 함수

가 여기에 내가 지금까지 가지고있는 매우 약화 된 모습이다 아니다 비록라고했을 때 다음과 같은 오류를 받고 있어요.

function tagsController($scope) { 
    $scope.handleClick = function(tags) { 
     // Parse Tags 
     $scope.finished_tags = parsed_data; 
    }; 

    $scope.$emit('handleEmit', { tags = $scope.finished_tags; }); 
}; 

function imagesController($scope,$http) { 

    var rows_per = 5; 

    $scope.$on('handleBroadcast', function(event, args) { 
     // Sort the images here, put them in matrix 
     // Example: matrix[row_number] = { picture1, picture2, picture3 } 

     $scope.data = matrix; 
     $scope.loadMore(); 
    }; 

    $scope.loadMore() = function() { 
     var last = $scope.images.length; 

     for (var i = 0; i < rows_per; i++) { 
      $scope.images[last + i] = new Array(); 
      $scope.images[last + i] = $scope.data[last + i].slice(0); 
     } 
    } 
} 

거친 아이디어는 페이지가 처음로드이다 (태그가/W)와 것은 PHP 스크립트에서 이미지를 얻을. 모두들. 저장되고 loadMore()가 호출되어 $ scope.images에 5 행의 이미지가 채워집니다. 그것은하고로드됩니다.

해당 스크립트의 라인이 $ window.height 및 $ window.scrollup에 액세스하고 있습니다. 나는 여전히 꽤 녹색 승/자바, 그래서 무언가를 끔찍한 일을하고있는 경우에 나를 깜박하게 자유롭게 느낀다. 여기에 태그 작업이 도움이 될 것입니다 방법을 보는 경우 게으른 로딩이 구현되기 전에 버전입니다 http://onfilm.us/test.html

:

이것은 내가 함께 테스트하고 있습니다 깨진 버전입니다. 나는 그것이 여기의 문제라고 생각하지 않는다.

http://onfilm.us/image_index.html

편집 : 나는 이것이 NG-무한 scroll.js 스크립트/w 문제라고 생각 않습니다. 오류는 31.0 (버전 1.0.0)에 있습니다. 그것은 나를 말하고있다 : TypeError : undefined는 함수가 아니다. 분명히 $ window를 좋아하지 않는다.

My JS Kung Fu는 이유를 말할 준비가되어 있지 않습니다. 당신은 여기 간단한 데모에서 문자 그대로 복사/붙여 넣기 작업을 볼 수 있습니다. (오류 포함) onfilm.us/scroll2.html

답변

1

처음으로 귀하의 HTML 마크 업이 적절하지 않은 것으로 보입니다. 무한 스크롤을 ng-repeat 지시문의 부모로 이동 시켜서 생성 된 각 행에 대해 중복 호출을하지 않도록해야합니다. http://binarymuse.github.io/ngInfiniteScroll/demo_basic.html

+0

감사합니다. onfilm.us/test.html을 업데이트했지만 infinite-scroll.js에서 오류가 발생했습니다. 간단한 데모를 구현하고 거기에서 "빌드"하려고합니다. –

+0

기본적으로 간단한 데모를 복사/붙여 넣기했지만 동일한 오류가 발생합니다. onfilm.us/scroll.html을보십시오. 메인 사이트에서 1.0.0을 다운로드했습니다. –

+2

안녕하세요, JQuery 라이브러리 참조가 누락되었습니다. Angular는 무한 스크롤에 적합하지 않은 기본 JQuery 기능 만 제공합니다. 각도 참조 전에 이것을 추가하십시오. 또한 loadMore에 typo 오류가 있습니다. $ scope.images 대신 $ fn - scope.imges가 있습니다. – Amitesh