Question

设置ng-infinite-scroll-disabled时出现问题。问题是它不起作用，当用户到达页面底部时，滚动没有被阻止，我可以滚动更多并且多次调用发生，而不是只有一个（因为滚动应该有被禁用了）。似乎我对$ scope.infinite_disabled

有疑问

<script>

        var myApp = angular.module('MyApp', ['infinite-scroll']);

        myApp.controller('DemoController',  function($scope, $http) {
            $scope.data_search = [];
            $scope.data_items = [];
            var json_url = some_url_example;
            $scope.infinite_disabled = false;
            var fun = 0;

            $scope.loadMore = function() {

                if ($scope.infinite_disabled) return;
                fun++;
                console.log("call " + fun + " " + $scope.infinite_disabled);
                $scope.infinite_disabled = true;
                console.log("call " + fun + " " + $scope.infinite_disabled);

                if (condition) {

                    $http.get(json_url)
                    .then(function(response) {

                        $scope.data_search.push(response.data);
                        var new_items = response.data.Items;

                        for(var i=0; i<new_items.length; i++) {
                            $scope.data_items.push(new_items[i]);
                        }

                        json_url = some_example_url;
                    });
                }
                $scope.infinite_disabled = false;
                console.log("call " + fun + " " + $scope.infinite_disabled);
            }
        });

    </script>

<div ng-controller='DemoController'>
        <div infinite-scroll='loadMore()' infinite-scroll-distance='1' infinite-scroll-disabled='infinite_disabled'>
            <ul>
                <li ng-repeat='item in data_items'>{{item}}</li>
            </ul>
        </div>
    </div>

来自控制台的输出表明，每次到达页面底部时，都会发出3次调用，所有这些都是针对相同的URL。变量$ scope.infinite_disabled值已正确更改。我的个人意见是，它的值在更改时对于视图（html）是不可见的。

加载页面时

nginfinite_demo.html:29 call 1 false
nginfinite_demo.html:31 call 1 true
nginfinite_demo.html:49 call 1 false

当我到达页面底部时，滚动未阻止，更多滚动更多呼叫

nginfinite_demo.html:29 call 2 false
nginfinite_demo.html:31 call 2 true
nginfinite_demo.html:49 call 2 false
nginfinite_demo.html:29 call 3 false
nginfinite_demo.html:31 call 3 true
nginfinite_demo.html:49 call 3 false
nginfinite_demo.html:29 call 4 false
nginfinite_demo.html:31 call 4 true
nginfinite_demo.html:49 call 4 false

ng-infinite-scroll-disabled与$ scope.disabled配对

0 个答案: