我的Angular Webapp中有一个奇怪的问题。我放入了一个加载屏幕,除了搜索视图外,所有视图都能正常工作,但我在所有视图中使用了相同的代码逻辑:/ 我尝试为你创造一个plunker,但它在那里工作得很好。我的错误必须直接在我的搜索视图代码中。
我有分页,当我点击另一个页面时,应该再次出现一个加载屏幕,但它没有显示(它确实显示在初始页面加载,但之后再也没有显示)。单击页面后,我的帮助变量loaded
被正确修改。我有另一种观点,就像它的分页一样,它工作得很好,而且我没有做任何与众不同的事情。在这两个视图中,我调用loadpage(p)
函数,然后将loaded
设置为false
,然后在完成所有操作后再次设置为true
。
我也不认为我的搜索太快了#34;加载屏幕显示,因为我的智能手机需要2-3秒才能加载页面。
以下是该应用当前实时版本页面的Link,其中出现问题。
这是我的HTML:
<img ng-if="!loaded" ng-src="images/SplashScreen.gif" />
<div ng-class="{load: !loaded}">
<ul class="pagination pagination-sm">
<li ng-repeat="p in pages()" ng-click="loadpage(p)"><a href="">{{p}}</a></li>
</ul>
<uib-accordion close-others="true">
<uib-accordion-group is-open="isopen" ng-repeat="pub in cutPubs">
[....]
</uib-accordion-group>
</uib-accordion>
</div>
我的控制器:
app.controller('SearchController', ['$scope', '$http', '$routeParams', '$filter', function($scope, $http, $routeParams, $filter) {
//Read searchterm
$scope.st = $routeParams.searchterm;
//Create Pub Arrays
$scope.filteredPubs = [];
$scope.cutPubs = [];
//Helpers
$scope.currentpage = 1;
$scope.noresults = false;
$scope.loaded = false;
$http.get("data/selectPubsSearch.php")
.success(function(data) {
$scope.pubs = data;
$scope.filteredPubs = $filter('search')($scope.pubs, $scope.st);
$scope.pagecount = Math.ceil($scope.filteredPubs.length/20);
//Pagination Loop
$scope.pages = function() {
var input = [];
for (var i = 1; i <= $scope.pagecount; i++) {
input.push(i);
}
return input;
};
//Cut off results into units of 20 for pages
$scope.cutArray = function(offset) {
$scope.cutPubs = [];
for (var i = offset; i < $scope.filteredPubs.length && i < offset+20; i++) {
$scope.cutPubs.push($scope.filteredPubs[i]);
}
$scope.loaded = true;
};
$scope.cutArray(0); //call for initial page load
//Load and insert the page specific content
$scope.loadpage = function(page) {
$scope.loaded = false;
$scope.currentpage = page;
var offset = page*20-20;
$scope.cutArray(offset);
};
});
}]);
以及其他视图的控制器片段,其中包含分页,以便它正常工作:
app.controller('ListController', ['$scope', '$http', function($scope, $http) {
$scope.loaded = false;
//Load and insert the page specific content
$scope.loadpage = function(page) {
if (page != $scope.currentpage) {
$scope.loaded = false;
$scope.currentpage = page;
$scope.pubs = [];
$scope.cities = [];
var offset = page*20-20;
//Get cities
$http({...})
.success(function(data) {
$scope.cities = data;
//How many pages do we need?
$http.get(...)
.success(function(data) {
$scope.pagecount = Math.ceil(data/20);
});
//Get pubs
$http({...})
.success(function(data) {
$scope.pubs = data;
$scope.loaded = true;
});
});
}
};
}]);