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