2016-06-26 46 views
0

我想建立一个小型项目的一个页面,包括无限滚动。我在执行滚动指令时遇到了问题,在'when-scrolled'指令定义中。错误的原因是:var visibleHeight = elem.height();我得到的错误是:简单的一页无限滚动 - 角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

你有elem和elm,这是一个错字吗?你也必须把console.log('yo)改为console.log('yo') – tanaydin