加载屏幕不显示何时单击分页但代码在其他视图上正常工作

时间:2015-12-11 08:42:25

标签: javascript angularjs

我的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;
                });
            });
        }
    };  
}]);

0 个答案:

没有答案