解决ajax浏览器历史状态管理

来源：互联网发布：js addeventlistener 编辑：程序博客网时间：2024/06/05 04:19

index.html

<div class="container" ng-controller="MainCtrl1">        <div class="col-xs-3 city nopadding">            <div class="column" ng-class="{'active':city.city===currentInfo.city}" ng-repeat="city in data track by $index" ng-bind="city.city" ng-click="changeCity(city.city)"></div>        </div>        <div class="col-xs-9 county">            <div class="col-xs-3" ng-repeat="item in currentInfo.county" ng-bind="item"></div>        </div>    </div><div class="container" ng-controller="MainCtrl">        <div class="col-xs-3 city nopadding">            <a class="column" ng-class="{'active':city.city===currentInfo.city}" ng-repeat="city in data track by $index" ng-click="changeCity(city.city)" ng-bind="city.city" ng-href="#/{{city.city}}"></a>        </div>        <div class="col-xs-9 county">            <div class="col-xs-3" ng-repeat="item in currentInfo.county" ng-bind="item"></div>        </div>    </div>

index.js

angular.module('bbsApp', ['ngCommon', 'ui.router'])/** * 通过html5中history Api实现 */.controller('MainCtrl1', ['$scope', '$apis','$location','$window',function ($scope,$apis,$location,$window) {    $scope.currentInfo={    };    $apis.get('/demo/data.json',function(data){        $scope.data=data;        $scope.currentInfo.city=$scope.data[0]['city'];        $scope.currentInfo.county=$scope.data[0]['county'];    });    //切换    $scope.changeCity=function(city){        $scope.currentInfo.city=city;        $scope.currentInfo.county=getCounty(city);        //历史记录管理        $location.url($scope.currentInfo.city);        $location.replace();        $window.history.pushState(JSON.stringify($scope.currentInfo), null, $location.absUrl());    };    $window.onpopstate=function(event){        if(event.state){            $scope.currentInfo=JSON.parse(event.state);        }else{            $scope.currentInfo.city=$scope.data[0]['city'];            $scope.currentInfo.county=$scope.data[0]['county'];        }    };    function getCounty(city){       return $scope.data.filter(function(item){            return item.city===city;        })[0]['county'];    }}])/** * 通过hash实现 */.controller('MainCtrl', ['$scope', '$apis','$location','$window',function ($scope,$apis,$location,$window) {    $scope.currentInfo={    };    $apis.get('/demo/data.json',function(data){        $scope.data=data;        $scope.currentInfo.city=$scope.data[0]['city'];        $scope.currentInfo.county=$scope.data[0]['county'];    });    $scope.changeCity=function(city){        $scope.currentInfo.city=city;        $scope.currentInfo.county=getCounty(city);    };    $window.addEventListener("hashchange", function(){        var hash=decodeURIComponent(location.hash.slice(2));        if(hash){            $scope.currentInfo.city=hash;            $scope.currentInfo.county=getCounty(hash);        }else{            $scope.currentInfo.city=$scope.data[0]['city'];            $scope.currentInfo.county=$scope.data[0]['county'];        }    }, false);    function getCounty(city){       return $scope.data.filter(function(item){            return item.city===city;        })[0]['county'];    }}]);

data.json

[    {        "city":"上海",        "county":["浦东","金山","崇明","奉贤"]    },    {        "city":"江苏",        "county":["南京","苏州","泰州","扬州"]    },    {        "city":"浙江",        "county":["杭州","嘉兴","舟山","绍兴"]    }]

index.css

.column{    display: block;    height: 40px;    line-height: 40px;    text-align: center;    border-bottom: 1px solid #ccc;    cursor: pointer;}.city{    border: 1px solid #ccc;    border-right: none;}.county{    width: 400px;    border: 1px solid #ccc;    height: 300px;}.active{    color: white;    background: #1daace;}

阅读全文

0 0