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

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; }