在 Angular Js 中拉动刷新答案

【问题标题】：Pull to refresh in Angular Js在 Angular Js 中拉动刷新
【发布时间】：2014-04-16 09:02:58
【问题描述】：

我正在使用 Angular JS 的 pull to refresh 插件。但它不起作用。我可以看到文字，但是当我尝试拉动时，什么也没有发生！我完成了此 GitHub 页面上记录的所有步骤：https://github.com/mgcrea/angular-pull-to-refresh。

我已经包含了所有文件（plugins/pulltorefresh/angular-pull-to-refresh.js、plugins/pulltorefresh/angular-pull-to-refresh.css、plugins/pullorefresh/angular-pull-to-refresh. tpl.js,plugins/pulltorefresh/angular-pull-to-refresh.tpl.css) 在项目中。

你有解决办法吗？

下面是我的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;
   };
 });

下面是 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>

下面是 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>

如果我错过了包含某些内容，请告诉我。我是否需要包含任何其他 js 文件或图像？我不是从https://github.com/mgcrea/angular-pull-to-refresh 知道的。

【问题讨论】：

标签： angularjs css angularjs-directive pull-to-refresh

【解决方案1】：

您似乎忘记了添加指令的关键部分。 Mgcrea 的代码如下：

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

你应该像这样将它添加到你的代码中：

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

我不确定这是否能解决您的问题，但这是您似乎没有正确解决的一件事。

【讨论】：