Pull to refresh in Angular Js

问题

I am using the pull to refresh plugin for Angular JS. But it is not working. I can see the text, but when I try to pull, nothing happens! I completed all the steps documented on this GitHub page: https://github.com/mgcrea/angular-pull-to-refresh.

I have included all the files(plugins/pulltorefresh/angular-pull-to-refresh.js,plugins/pulltorefresh/angular-pull-to-refresh.css,plugins/pulltorefresh/angular-pull-to-refresh.tpl.js,plugins/pulltorefresh/angular-pull-to-refresh.tpl.css) in project.

Do you have a solution?

Below is my controller.js

var phonecatApp = angular.module('phonecatApp', ["ngRoute","ngI18n","phonecatControllers","phonecatservices","LocalStorageModule"]);

phonecatApp.config(['$routeProvider','localStorageServiceProvider',
                function($routeProvider,localStorageServiceProvider) {
                  localStorageServiceProvider.setPrefix('demoPrefix');
                  $routeProvider.
                  when('/pulltorefresh', {
                      templateUrl: 'templates/pulltorefresh.html',
                      controller: 'PullCtrl'
                      }).
                    when('/login', {
                     templateUrl: 'templates/login.html',
                     controller: 'LoginCtrl'
                     }).
                    otherwise({
                      redirectTo: '/pulltorefresh' 
                    });
                }]);
 var phonecatControllers = angular.module('phonecatControllers', ["hammer"]);

 phonecatControllers.controller('PullCtrl', function($scope, $q) {
 $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

 $scope.onReload = function() {
 console.warn('reload');
 var deferred = $q.defer();
 setTimeout(function() {
 deferred.resolve(true);
 }, 1000);
 return deferred.promise;
   };
 });

Below is the index.html

<!DOCTYPE html>
<html ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no,   width=device-width">
<title>TE</title>
<!-- Bootstrap css -->
<link href="plugins/Bootstrap/bootstrap.css" rel="stylesheet">
<!-- your app's css -->
<link href="css/index.css" rel="stylesheet">
<link href="plugins/pulltorefresh/angular-pull-to-refresh.css" rel="stylesheet">
<link href="plugins/pulltorefresh/style.css" rel="stylesheet">
<!-- angularjs scripts -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="plugins/hammer/hammer.js"></script>
<script type="text/javascript" src="plugins/Bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="plugins/angular/angular.js"></script>
<script type="text/javascript" src="plugins/angular/angular-animate.js"></script>
<script type="text/javascript" src="plugins/angular/angular-resource.js"></script>
<script type="text/javascript" src="plugins/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="plugins/angular-ui/angular-ui-router.js"></script>
<script type="text/javascript" src="plugins/angular/angular-route.min.js"></script>
<script type="text/javascript" src="plugins/hammer/angular-hammer.js"></script>
<script type="text/javascript" src="plugins/pulltorefresh/angular-pull-to-refresh.js">        </script>
</head>  

 <body ng-view ng-class="{headerMargin: isHeaderAvailable,footerMargin: isFooterAvailable,datePickeMargin: hasDatePicker}">
  </body>
 </html>

Below is the pulltorefresh.html

<div class="content">
 <ul class="list-group list-group-table" pull-to-refresh="onReload()">
    <li class="list-group-item" ng-repeat="state in states" ng-bind="state"></li>
 </ul>
</div>

Please let me know if i missed to include something. Should I need to include any other js files or images? I am not getting to know from https://github.com/mgcrea/angular-pull-to-refresh.

回答1:

You seem to have forgotten a crucial part of adding the directive. Mgcrea has the following line of code:

angular.module('myapp', ['mgcrea.pullToRefresh']);

You should add it to your piece of code like so:

var phonecatApp = angular.module('phonecatApp', ["ngRoute",
                                                 "ngI18n", 
                                                 "phonecatControllers",      
                                                 "phonecatservices",
                                                 "LocalStorageModule",
                                                 "mgcrea.pullToRefresh"]);

I am not sure if this fixes your problem, but this is one thing you don't seem to have correctly in place.

来源：https://stackoverflow.com/questions/22347955/pull-to-refresh-in-angular-js

标签

angularjs

css3

angularjs-directive

pull-to-refresh