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