Question

我正在尝试为一个迷你项目构建一个单视图页面，包括无限滚动。我在执行滚动指令时遇到了问题，在滚动时＆＃39;滚动时＆＃39;指令定义。错误的原因是：var visibleHeight = elem.height();我得到的错误是：

angular.js：10671 TypeError：elem.height不是函数

我想了解为什么会发生这种情况以及如何解决这个问题？

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>

Answer 1

elem.height();

意味着，你正在调用元素的高度函数...但要获得高度，你必须获得元素高度属性，如

elem.height;

简单的单页无限滚动角js

1 个答案: