拉角JS来刷新 [英] Pull to refresh in Angular Js
问题描述
我现在用的是拉来刷新角JS插件。但它不工作。我可以看到文本，但是当我试图去拉，什么都不会发生！我完成了所有记录在本页面GitHub的的步骤： https://github.com/mgcrea/角拉来刷新。
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.
我已经包括了所有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)在项目中。
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.
你有一个解决方案？
下面是我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的的
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>
下面是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-知道到刷新。
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.
推荐答案
您似乎忘记添加指令的重要组成部分。 Mgcrea有code的以下行：
You seem to have forgotten a crucial part of adding the directive. Mgcrea has the following line of code:
angular.module('myapp', ['mgcrea.pullToRefresh']);
您应该将它添加到你的作品code像这样：
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.
这篇关于拉角JS来刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
