代码之家 › 专栏 › 技术社区 › itsme

Angular js-切换控制器时停止控制器的活动(http request tho)(站点页面)

controller redirect http angularjs javascript

itsme · 技术社区 · 12 年前

在我的应用程序中一切都很好,但是

我遇到了一个奇怪的问题:

如果我在 /channels 我启动了 pagination 分页需要大约5秒才能结束,

因此,如果在加载分页的同时,我 更改控制器和视图 浏览另一个应用页面, 当分页完成他的过程后,我被重定向到/channels :O

这怎么可能?如何避免这种情况?

这是一段简单的代码:

 $routeProvider
        .when('/',{
            templateUrl:'views/home/index.html',
            controller:'HomeController'
        })
        .when('/auth/login',{
            templateUrl:'views/auth/login.html',
            controller:'UsersController'
        })
        .when('/auth/signup',{
            templateUrl:'views/auth/signup.html',
            controller:'UsersController'
        })
        .when('/channels',{
            templateUrl:'views/channels/index.html',
            controller:'BrowseController'
        })
        .when('/channels/search',{
            templateUrl:'views/channels/index.html',
            controller:'BrowseController',
            reloadOnSearch: false
        })
        .when('/channels/create',{
            templateUrl:'views/channels/create.html',
            controller:'ChannelsController'
        })
        .when('/users',{
            templateUrl:'views/users/index.html',
            controller:'UsersController'
        })
        .otherwise({
            redirectTo:'/'
        });

    app.controller('BrowseController',['$rootScope','$scope','$route','$routeParams','$http','$location','ngDialog', function($rootScope,$scope,$route,$routeParams,$http,$location,ngDialog) {
          $scope.layout.loading = true;
        $scope.pagination = {
            "keywords":$routeParams.keywords,
            "offset":$routeParams.offset ,
            "genre":$routeParams.genre ,
            "last_item":0,
            "results": []
        }

        $scope.redirect_pagination = function(_map){

            $location.path('channels/search').search(_map);

        }

        $scope.paginate = function(_offset,_genre,_keywords){
             $rootScope.layout.loading = true;
            if(!_offset){
                _offset = 1;
            }

            $http({
                method:'GET',
                url:$scope.config.app_ws+'get/channels/',
                params:{
                    offset:_offset,
                    genre:_genre,
                    keywords: _keywords
                }
            }).success(function(response){
            $scope.pagination.results.push(response);
            $scope.pagination.last_item = $scope.pagination.results.length;
            if($scope.config.app_url !== '/channels'){
                 $scope.redirect_pagination({
                    'offset':_offset,
                    'genre':_genre,
                    'keywords':_keywords
                });
             }

             $scope.pagination.offset = _offset * 2 ;
             $rootScope.layout.loading = false;
            }).error(function(status, response){
                alert('opsss');
            });
        }
        //default pagination or by url params

        $scope.paginate($scope.pagination.offset,$scope.pagination.genre,$scope.pagination.keywords);

    }])

其他材料:

$rootScope.$on('$routeChangeStart', function(newRoute, oldRoute) {
$rootScope.layout.loading = true;

//Make app scroll to top by default while navigating or use #anchor in url like http://sitse.com/someroute/?scrollTo=<:id_element:> to make it scroll to that element :id:
$location.hash($routeParams.scrollTo);
$anchorScroll();
//Close dialog every route change
ngDialog.close();

});
$rootScope.$on('$routeChangeError', function() {
//hide loading gif
$rootScope.layout.loading = false;
});
$rootScope.$on('$routeChangeSuccess', function() {
//Animate only some route
if($rootScope.layout.routes.indexOf($rootScope.config.app_url) == -1){
    $rootScope.layout.animation = false;
}else{
    $rootScope.layout.animation = true;
} 
//hide loading gif
$rootScope.layout.loading = false;

});

}]);

1 回复 | 直到 12 年前

Ye Liu 12 年前

你需要一种方法来阻止 $location.path() 将用户重定向回。我认为实现这一目标的一种方法是设立一个标志,如下所示:

app.controller('BrowseController', [..., function($scope, ...) {
    ...

    var paginationInProgress = false;

    // Cancel pagination if route has been changed
    $scope.$on('$routeChangeStart', function() {
        paginationInProgress = false;
    });

    $scope.redirect_pagination = function(_map){
        if (paginationInProgress) {
            $location.path('channels/search').search(_map);
            paginationInProgress = false;
        }
    };

    $scope.paginate = function(_offset,_genre,_keywords){
        ...
        paginationInProgress = true;
    };
}]);