AngularJS - 下拉刷新模块不工作

Question

我想在Angular中实现“下拉​​刷新”。很多JS库不与角工作，但我发现这一个：

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 ，但没有解决我的问题。

onReload方法既不被调用。

我正在测试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"); 
       }); 
      } 
     } 
    }; 
});