在AngularJS中无负载地查看上一页数据

时间:2015-04-28 04:50:02

标签: javascript angularjs data-binding

路线:

app.config(['$routeProvider', function ($routeProvider) {
          $routeProvider

            .when("/home/:page", {templateUrl: "templates/home.html", controller: "HomeController"})

            .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
        }]);

Controller :


     App.controller('HomeController', function ( $scope, $location, $http,defaultVal,$routeParams ,basic,State) {
    $scope.allList = State.formData;
    start = $routeParams.page == undefined ? 1 : $routeParams.page;
    var trip_data = {
        start:(Number(start)-1) * (Number(defaultVal.perPage)),
        perpage:defaultVal.perPage
    }
    basic.hitAPI(defaultVal.sitePath+"search",{reqObject:JSON.stringify(trip_data)}).success(function(response){
        if(response.type == "success"){
            p = Number(start)- Number(1) < 0 ? false : Number(start)-Number(1);
            result = Math.ceil(response.total / defaultVal.perPage);
            n = Number(start) + Number(1) > result ? false : Number(start) + Number(1);
            response.page = {
                next : n,
                prev: p
            };
            $scope.allList = response;
            State.formData = $scope.allList;
        } else if(response.type == "error"){
            basic.messages.showErrorMessage(response.message);
        }else{
            basic.messages.generalError();
        }
    });
});

模板:

<div class="trips" >
    <div class="tripBox" ng-repeat="Home in allList.data" 
         ng-swipe-left="swipeLeft('/home/{{allList.page.next}}')"
         ng-swipe-right="swipeRight('/home/{{allList.page.prev}}')">
        <a ng-href="#/trip/{{Home.id}}">
        <h3>{{ Home.FromAddress }}  <i class="fa fa-long-arrow-right"></i> {{ Home.ToAddress }}</h3>
        <div class="poolPrice">${{ Home.charges }}</div>
        <p><span>Posted By :</span> {{ Home.UserName }}, 24 yrs, {{ Home.UserGender | capitalize }}</p>

    </div>
</div>

问题是,在我返回之后,它会再次向服务器发送请求以获取数据。我希望当我回去时它显示以前的数据而不向服务器发送请求。

1 个答案:

答案 0 :(得分:0)

好的,当你返回一些视图(在当前之前)必须被呈现(无论我们在家里或rtip所说的是什么页面)如果这个页面的控制器无条件地调用服务那么它当然会被请求再次(我的角度使浏览器不缓存其页面)。看起来你使用了一些状态存储($ scope.allList = State.formData;)不是吗?然后,您可以存储页面所需的数据,并在控制器中首先检查它的存在,如果不存在,则调用API,但在这种情况下,您的页面可能会随着时间的推移变得不合时宜。