Angular Js |基於ViewPort的延遲加載指令

Question

延遲加載指令有可能嗎？如果我們在單個頁面上有20個指令，並且在滾動上，如果指令在視口中，它應該被渲染。否則，不應該採取任何行動。

它應該像延遲加載圖像一樣。

我們可以做到嗎？

Answer 1

你問是非特異性的，但我願意嘗試： 想象一下你的HTML一樣，

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

的指令是做什麼需要爲您的項目

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"}); 
     ... 
    } 
}]);