2016-06-26 10 views
0

私はミニプロジェクトのために無限のスクロールを含む1ビューページを構築しようとしています。スクロールディレクティブを実行する際に、スクロールされたディレクティブ定義内で問題にぶつかります。エラーの原因は次のとおりです。var visibleHeight = elem.height();私は取得エラーは、次のとおりです。私はこれが起こって、どのようにそれを修正することです理由を理解したい単純な1ページ無限のスクロール角度js

angular.js:10671 TypeError: elem.height is not a function

movieApp.controller('homeController', ['$scope', '$location', 'movieService', '$timeout', '$element', 
    function ($scope, $location, movieService, $timeout, $element) { 
    window.scope = $scope; 
    console.log($element); 
    $scope.element = $element; 
    $scope.loading = true; 
    //pass the page number to getPopularMovies 
    $scope.popularMovies = []; 
    $scope.getInitialMovies = function() { 
     $scope.pageNumber = 1; 
     movieService.getPopularMovies(1).then(function (response) { 
     console.log(response.data.results[0]); 
     $scope.popularMovies = response.data.results; 
     $scope.loading = false; 
     }) 
    } 
    $scope.getInitialMovies(); 
    //pass the displayRecordCount to the backend on the scroll event, then concat the new records on to $scope.popularMovies 
    $scope.getMoreMovies = function() { 
     $scope.pageNumber++; 
     movieService.getPopularMovies($scope.pageNumber).then(function (response) { 
     $scope.popularMovies = $scope.popularMovies.concat(response.data.results); 
     }) 
    } 
    $timeout(function() { 
     $scope.getMoreMovies(); 
    }, 2000) 
    } 
]).directive('whenScrolled', function() { 
    return { 
    restrict: 'AE', 
    link: function (scope, elem, attrs) { 
     console.log(arguments) 
     var visibleHeight = elem.height(); 
     var threshold = attr.rpWhenScrolledThreshold || 20; 
     bindScrollHandler(); 

     function bindScrollHandler() { 
     elm.scroll(scrollHandler); 
     } 

     function scrollHandler() { 
     var scrollableHeight = elm.prop('scrollHeight'); 
     var hiddenContentHeight = scrollableHeight - visibleHeight; 
     if (hiddenContentHeight > 0 && visibleHeight > 0 && hiddenContentHeight - elm.scrollTop() <= threshold) { 
      // Scroll is almost at the bottom. Loading more rows 
      _.defer(function() { 
      scope.$apply(attr.rpWhenScrolled); 
      elm.off('scroll'); 
      $timeout(bindScrollHandler, attr.rpWhenScrolledThrottle || 0); 
      }); 
     } 
     } 
    } 
    } 
}) 

ビュー:

<div class="container"> 
     <div ng-controller="homeController" when-scrolled="console.log('yo)" 
      when-scrolled-throttle="500" 
      when-scrolled-threshold="750"> 
      <div class="loader" ng-show="loading"> 
      </div> 
      <!-- <pre>{{popularMovies | json}}</pre> --> 
      <div ng-repeat="movie in popularMovies"> 
       {{movie.title}} + {{movie.release_date}} 
      </div> 
     </div> 
    </div> 

答えて

0
elem.height(); 

手段、あなたは...要素の高さ関数を呼び出しているが、高さを得るために、あなたは

elem.height; 
+0

のような要素のheightプロパティを取得する必要があります私がその変更を行うと、.scroll()関数は同じエラーをスローしますが、その関数はそこにあるはずです...私は行方不明の広い概念があると思います... – devdropper87

+0

あなたはエレミとエルムを持っています、それはタイプミスですか?また、console.log( 'yo')をconsole.log( 'yo')に変更する必要があります – tanaydin

関連する問題