Question

我想在Angular中实现“pull down to refresh”。许多JS库不能与Angular一起使用，但我找到了这个：

https://github.com/mgcrea/angular-pull-to-refresh

然而，它不起作用。我在顶部看到文本“pull down to refresh”，因此指令正确安装。但就是这样，当我向下滚动时没有任何反应。

var feedApp = angular.module("feedApp", ['mgcrea.pullToRefresh']);
....
 <div id="feed-list-content" data-role="content">

    <ul class="feed-list" data-role="listview" pull-to-refresh="onReload()">
      <li ng-repeat="summaryItem in summaryItems | orderBy: 'created':true" class="feed-item">
....
      </li>
    </ul>
</div>

此处的问题相同：Pull to refresh in Angular Js和此处：Angular JS - Pull to refresh 但没有解决我的问题。

onReeload方法既不会被调用。

我正在Android模拟器和Android设备上进行测试。无法在iOS上测试，是否是由Android引起的？

Answer 1

我修改了这个插件并解决了我的问题。

试试这样：

directive("pullToRefresh", function ($compile, $timeout, $q) {
    return {
        scope: true,
        restrict: "A",
        transclude: true,
        template: '<div class="pull-to-refresh"><i ng-class="icon[status]"></i>&nbsp;<span ng-bind="text[status]"></span></div><div ng-transclude></div>',
        compile: function compile(elem, attrs, transclude) {
            return function postLink(scope, iElem, iAttrs) {

                var body = $('body');
                var scrollElement = iElem.parent();
                var ptrElement = window.ptr = iElem.children()[0];

                scope.text = {
                    pull: "pull to refresh",
                    release: "release to refresh",
                    loading: "refreshing..."
                };

                scope.icon = {
                    pull: "fa fa-arrow-down",
                    release: "fa fa-arrow-up",
                    loading: "fa fa-refresh fa-spin"
                };

                scope.status = "pull";

                var shouldReload = false;
                var setScrolTop = false;

                var setStatus = function (status) {
                    shouldReload = status === "release";
                    scope.$apply(function () {
                        scope.status = status;
                    });
                };

                var touchPoint = 0;

                iElem.bind("touchmove", function (ev) {
                    var top = body.scrollTop();
                    if (touchPoint === 0) touchPoint = ev.touches[0].clientY;
                    var diff = ev.touches[0].clientY - touchPoint;
                    if (diff >= 130) diff = 130;

                    if (diff < 80 && shouldReload) {
                        setStatus("pull");
                        setScrolTop = true;
                    }

                    if (top <= 0) {
                        scrollElement[0].style.marginTop = diff + "px";
                        if (diff > 80 && !shouldReload) setStatus("release");
                    }
                });

                iElem.bind("touchend", function (ev) {
                    if (setScrolTop) {
                        setScrolTop = false;
                        body.scrollTop(0);
                    }
                    if (!shouldReload) {
                        touchPoint = 0;
                        scrollElement[0].style.marginTop = "0px";
                        return;
                    }
                    ptrElement.style.webkitTransitionDuration = 0;
                    ptrElement.style.margin = '0 auto';
                    setStatus("loading");

                    var start = +new Date();
                    $q.when(scope.$eval(iAttrs.pullToRefresh))
                    .then(function () {
                        var elapsed = +new Date() - start;
                        $timeout(function () {
                            body.scrollTop(0);
                            touchPoint = 0;
                            scrollElement[0].style.marginTop = "0px";
                            ptrElement.style.margin = "";
                            ptrElement.style.webkitTransitionDuration = "";
                            scope.status = "pull";
                        }, elapsed < 400 ? 400 - elapsed : 0);
                    });
                });

                scope.$on("$destroy", function () {
                    iElem.unbind("touchmove");
                    iElem.unbind("touchend");
                });
            }
        }
    };
});

AngularJS - 下拉刷新模块不起作用

1 个答案: