2014-03-12 68 views
0

我正在使用pull來刷新Angular JS的插件。但它不起作用。我可以看到文字,但是當我嘗試拉時,沒有任何反應!我完成了此GitHub頁面上記錄的所有步驟:https://github.com/mgcrea/angular-pull-to-refresh。我已經包括了所有的文件(插件/ pulltorefresh /角度pull-to-refresh.js,插件/ pulltorefresh/angular-pull-to-refresh.css,plugins/pulltorefresh/angular-pull-to-refresh .tpl.js,plugins/pulltorefresh/angular-pull-to-refresh.tpl.css)。拉動更新Angular Js

您有解決方案嗎?

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

回答

1

您似乎忘記了添加指令的關鍵部分。 Mgcrea有下面的代碼行:

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

你應該把它添加到您的代碼如下所示:

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

我不知道這是否解決您的問題,但是這是一件事你似乎沒有正確到位。