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>
height属性当我做出这种改变.scroll()函数抛出相同的错误,但该函数应该在那里......我认为有一个更广泛的概念,我失踪... – devdropper87
你有elem和elm,这是一个错字吗?你也必须把console.log('yo)改为console.log('yo') – tanaydin