4

このようなコードを使用して、AngularJS でエンドレス スクロール効果を作成しています。ulスクロール可能なコンテナー (この場合は) のコンテンツを別の html ファイルに移動し、ng-view を使用してコンテンツをロードすることで、コードの一部をリファクタリングしようとしました。

これが完了した後は、scope.$apply(attr.whenScrolled);何の効果もありません。loadMore()メソッドは単に呼び出されなくなりました。

ul-content を別のファイルに移動して動的にロードした後、スコープについて何か変更しましたか?

更新: コードは次のとおりです。

App.directive('whenScrolled', function() {
return function(scope, element, attr) {
    var raw = element[0];

    // binding on element doesn't work so this is a temp fix
    $(document).bind('scroll', function() {
      var scrollPercentage = (($(window).scrollTop() + $(window).height()) / $(document).height()) * 100;

      if(scrollPercentage > 75 && !scope.in_progress && !scope.is_reached_end)
      {
        console.log('test')
        scope.$apply(attr.whenScrolled);
      }
    });
};

});

App.config(['$routeProvider', function($routeProvider){
  $routeProvider.when('/', {
    templateUrl: 'views/offers.html',
    controller: 'OffersCntl'
  });
}]);

景色：

<div class="tileContainer" ng-controller="OffersCntl">
    <h2>Something very important :)</h2>
    <div id="tiles" class="tiles" when-scrolled="loadMore()">
        <div ng-view></div>
    </div>
</div>

私はかなり太ったコントローラを持っていますが、それを使って投稿を汚したくありません。基本的に scope.loadMore メソッドがあります。

4

2 に答える 2

5

ng-includeの代わりに使用しng-viewます。

http://jsfiddle.net/pvtpenguin/U7Bz9/540/

たとえば、あなたの見解では：

 <div class="tileContainer" ng-controller="OffersCntl">
   <h2>Something very important :)</h2>
   <div id="tiles" class="tiles" when-scrolled="loadMore()">
     <div ng-include src="'offer.html'"></div>
   </div>
 </div>
于 2013-05-10T23:07:55.093 に答える
0

このディレクティブは、スクロール オフセットを使用してコンポーネントに弾力性を与え、固定の高さに制限しません。

app.directive('whenScrolled', function($window, $timeout) {
  return {
    restrict: "A",
    link: function(scope, element, attr) {

      // bind the digest cycle to be triggered by the scroll event
      // when it exceeds a threshold
      angular.element($window).bind('scroll', function() {

        var supportPageOffset = window.pageXOffset !== undefined;
        var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

        var scrollY = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

        var iScroll = element.prop('offsetTop') + element.prop('offsetHeight');
        var iScrooling =  scrollY + ( this.screen.height * 0.9 );

        //console.log(iScrooling+'/'+iScroll);

        if ( iScrooling >= iScroll ) {
          angular.element($window)[0].requestAnimationFrame(function(){
            // invoke the function passed into the 'whenScrolled' attribute
            scope.$apply(attr.whenScrolled);

          })
        }

      });
    }
  }
});

あなたの HTML:

<div class="tileContainer" ng-controller="OffersCntl">
   <h2>Something very important :)</h2>
   <div id="tiles" class="tiles" when-scrolled="loadMore()">
     <div ng-repeat="item in items">
       {{ item.id }}
     </div>
   </div>
</div>

コントローラー、これをリクエストAjaxに置き換えることができます

$scope.items = [];

var counter = 0;
$scope.loadMore = function() {
    for (var i = 0; i < 5; i++) {
        $scope.items.push({id: counter});
        counter += 10;
    }
};

$scope.loadMore();

古いブラウザーのサポートが必要な場合は、次の関数を追加できます。

//requestAnimationFrame for old browsers

(function() {
  var lastTime = 0;
  var vendors = ['webkit', 'moz'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame =     window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());
于 2015-04-07T18:20:23.733 に答える