我按照教程创建了一个demo来显示" Pull to refresh"和"无限滚动"。但是拉动刷新根本不起作用,因为它总是直接转到超链接而不是每当我尝试拉动刷新时刷新。
我的HTML:
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="AppCtrl">
<ion-refresher pulling-text="Pull to refresh"
refreshing-text="Loading..."
refreshing-icon="ion-loading-c"
pulling-icon="ion-ios7-arrow-thin-down"
on-refresh="loadNewerStories()">
</ion-refresher>
<ion-list>
<ion-item ng-repeat="story in stories track by story.id" href="{{story.url}}">
<img ng-src="{{story.thumbnail}}" ng-if="story.thumbnail.startsWith('http')">
<h2 class="story-title">{{story.title}}</h2>
<p>
<span am-time-ago="story.created_utc" am-preprocess="unix"></span>
- {{story.domain}}
</p>
</ion-item>
</ion-list>
<ion-infinite-scroll
on-infinite="loadOlderStories()"
distance="5%">
</ion-infinite-scroll>
</ion-content>
我的javascript:
angular.module('starter', ['ionic'])
.controller('AppCtrl',function($scope,$http) {
$scope.stories = [];
function loadStories(params, callback) {
$http.get('https://www.reddit.com/r/funny/new/.json',{params : params})
.success(function(response) {
var stories = [];
angular.forEach(response.data.children, function(child) {
stories.push(child.data);
})
callback(stories);
});
}
$scope.loadOlderStories = function() {
var params = {};
if ( $scope.stories.length > 0 ) {
params['after'] = $scope.stories[$scope.stories.length - 1].name;
}
loadStories(params, function(oldStories) {
$scope.stories = $scope.stories.concat(oldStories);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.loadNewerStories = function() {
var params = {'before': $scope.stories[0].name};
loadStories(params, function(newerStories) {
$scope.stories = newerStories.concat($scope.stories);
$scope.$broadcast('scroll.refreshComplete');
});
}
});
我该怎么办?感谢。
P.S。:如果我在ion-item中删除href,那就没问题了。