角度J | ViewPortに基づくレイジーロード命令

Question

遅延ロード命令は可能ですか？

1つのページに20個のディレクティブがあり、スクロールすると、そのディレクティブがビューポート内にあればレンダリングされるはずです。それ以外の操作は必要ありません。

イメージの遅延読み込みとして動作する必要があります。

私たちはそれを達成できますか？

Answer 1

あなたの質問には、非特異的であるが、私は試して喜ん： は、あなたの商品のために必要なものは何でもディレクティブがやっているしている

<div ng-app="app" ng-controller="myCtrl"> 
<ul id="myList"> 
    <li ng-repeat="item in data"> 
     <mydirective item="item"></mydirective> 
    </li> 
</ul> 

のようなあなたのHTMLを想像してみて

angular.module("mydirective", []).directive("mydirective", function() { 
    return { 
     templateUrl: 'templates/mytemplate.php', 
     replace: false, 
     transclude: false, 
     restrict: 'A', 
     scope: { 
      item:  "=" 
     } 
    }; 
}); 

コントローラーはそのように見えるでしょう

app.controller("myCtrl", ["$scope", function ($scope) { 
    $scope.data = [ 
     {id: 1, "name": "img1"}, 
     {id: 2, "name": "img2"}, 
     {id: 3, "name": "img3"} 
    ]; 

    $("#myList").bind("scrollend", function(e){ 
     $scope.loadNextElements(); 
    }); 

    $scope.loadNextElements = function() { 
     // add new elements 
     $scope.data.push({id: 4, "name": "img4"}); 
     $scope.data.push({id: 5, "name": "img5"}); 
     $scope.data.push({id: 6, "name": "img6"}); 
     ... 
    } 
}]);