在 Angular Js 中拉动刷新 - IT屋-程序员软件开发技术分享社区
在 Angular Js 中拉动刷新
[英] Pull to refresh in Angular Js
本文介绍了在 Angular Js 中拉动刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Angular JS 的 pull to refresh 插件.但它不起作用.我可以看到文字，但是当我尝试拉动时，没有任何反应！我完成了此 GitHub 页面上记录的所有步骤:https://github.com/mgcrea/角度下拉刷新 .
我已经包含了所有文件(plugins/pulltorefresh/angular-pull-to-refresh.js、plugins/pulltorefresh/angular-pull-to-refresh.css、plugins/pulltorefresh/angular-pull-to-refresh.js.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',功能($routeProvider，localStorageServiceProvider){localStorageServiceProvider.setPrefix('demoPrefix');$routeProvider.当('/pulltorefresh'，{templateUrl: '模板/pulltorefresh.html',控制器:'PullCtrl'}).当('/登录'，{templateUrl: 'templates/login.html',控制器:'登录控制'}).除此以外({重定向到:'/pulltorefresh'});}]);var phonecatControllers = angular.module('phonecatControllers', ["hammer"]);phonecatControllers.controller('PullCtrl', function($scope, $q) {$scope.states = ['阿拉巴马州', '阿拉斯加州', '亚利桑那州', '阿肯色州', '加利福尼亚州', '科罗拉多州', '康涅狄格州', '特拉华州', '佛罗里达州', '乔治亚州', '夏威夷州',爱达荷州"、伊利诺伊州"、印第安纳州"、爱荷华州"、堪萨斯州"、肯塔基州"、路易斯安那州"、缅因州"、马里兰州"、马萨诸塞州"、密歇根州"、明尼苏达州"、密西西比州"', '密苏里州', '蒙大拿州', '内布拉斯加州', '内华达州', '新罕布什尔州', '新泽西州', '新墨西哥州', '纽约州', '北达科他州', '北卡罗来纳州', '俄亥俄州'', '俄克拉荷马州', '俄勒冈州', '宾夕法尼亚州', '罗德岛州', '南卡罗来纳州', '南达科他州', '田纳西州', '德克萨斯州', '犹他州', '佛蒙特州', '弗吉尼亚州', '华盛顿"、西弗吉尼亚"、威斯康星"、怀俄明"]；$scope.onReload = function() {console.warn('重新加载');var deferred = $q.defer();设置超时(函数(){deferred.resolve(true);}, 1000);返回 deferred.promise;};});下面是 index.html
<html ng-app="phonecatApp"><头><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"><!-- 您的应用程序的 css --><link href="css/index.css" rel="样式表"><link href="plugins/pulltorefresh/angular-pull-to-refresh.css" rel="stylesheet"><link href="plugins/pulltorefresh/style.css" rel="stylesheet"><!-- angularjs 脚本--><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"><body ng-view ng-class="{headerMargin: isHeaderAvailable,footerMargin: isFooterAvailable,datePickeMargin: hasDatePicker}"> </html>下面是 pulltorefresh.html
<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>
如果我遗漏了某些内容，请告诉我.我是否需要包含任何其他 js 文件或图像?我不知道从 https://github.com/mgcrea/angular-pull-刷新 .
解决方案
您似乎忘记了添加指令的关键部分.Mgcrea 有以下代码行:
angular.module('myapp', ['mgcrea.pullToRefresh']);您应该像这样将其添加到您的代码中:
var phonecatApp = angular.module('phonecatApp', ["ngRoute","ngI18n","phonecatControllers","电话猫服务","本地存储模块","mgcrea.pullToRefresh"]);我不确定这是否能解决您的问题，但这是您似乎没有正确实施的一件事.
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 .
解决方案
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.
这篇关于在 Angular Js 中拉动刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
