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>
のような要素のheightプロパティを取得する必要があります私がその変更を行うと、.scroll()関数は同じエラーをスローしますが、その関数はそこにあるはずです...私は行方不明の広い概念があると思います... – devdropper87
あなたはエレミとエルムを持っています、それはタイプミスですか?また、console.log( 'yo')をconsole.log( 'yo')に変更する必要があります – tanaydin