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

Angular Js |基于ViewPort的延迟加载指令

1 个答案: