页面刷新时的AngularJS保留选项卡

Question

我有以下代码(咖啡脚本)：

window.AddressGridController = [ 
  "$scope", "$rootScope", "$http"
  ($scope, $rootScope, $http) ->
    init = window.angularInit
    $scope.countryNames = init.countryNames
    $scope.addressBook = init.addressBook
    $scope.addressBook.unshift "__add_address"
    $scope.currentPage = 0
    $scope.pageSize = 8
    $scope.totalPages = Math.ceil($scope.addressBook.length / $scope.pageSize)
    $scope.isSelected = (ai) ->  $rootScope.selAddress is ai.address._id
    $scope.setSelected = (ai, toggle) ->
      if toggle and $rootScope.selAddress is ai.address._id
        $rootScope.setAddress(null)
      else
        $rootScope.setAddress(ai)
    if init.cart
      addrId = if init.cart.warehousePickup then "WAREHOUSE" else init.cart.address
      for addrInfo,index in init.addressBook
        if addrInfo.address and addrInfo.address._id is addrId
          $scope.setSelected addrInfo
    $scope.showForm = ->
      $rootScope.setAddress(null)
      $rootScope.$broadcast "new-address"
    $scope.$on "address-update",  (e, index, ai) -> 
      index = if index is -1 then $scope.addressBook.length else (index + 1)  
      $scope.addressBook[index] = ai
      if $rootScope.selAddress is ai.address._id
        $rootScope.setAddress(ai)
    $scope.editAddress = (ai) -> $rootScope.$broadcast "edit-address", ai
    $scope.deleteAddress = (ai) -> 
      if window.confirm("Do you really want to delete this address ? [You can't undo it]")
        postData = _csrf: window.angularInit._csrf
        $http.post("/address/user/delete/#{ai.address._id}", postData)
          .success (data) ->
            $rootScope.setAddress(null)  
            ii = $scope.addressBook.indexOf ai
            $scope.addressBook.splice ii, 1
          .error (data) -> alert "Server error " + ((data.error and data.error.message) or data)
  ]

​

​

问题是，当用户刷新页面时，所选地址在页面2上隐藏。

如何正确保存位置？

Answer 1

要在刷新时保存制表符，可以将其设置为路由中的查询参数，例如。http://www.example.com/index.html?page=2&selectedIndex=4。page=2&selectedIndex=4 (‘？’之后的所有内容)是查询字符串，可用作应用程序中的参数。与使用本地存储相比，这样做的优点是URL可以与其他人共享，或者您可以将其加入书签，或者其他任何东西。

设置查询参数的步骤：

function onClick(itemIndex) {
    // Add the selected index to the query parameters
    $location.search({page: $scope.currentPage, selectedIndex: itemIndex});
}

现在你的网址将类似于http://localhost/my-route?selectedIndex=2，然后在你的应用程序初始化中，你只需要阅读$routeParams：

var page = $routeParams.page;
var selectedIndex = $routeParams.selectedIndex;

您还需要将reloadOnSearch属性更改为false，否则在设置路由参数时页面将刷新：https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

$routeProvider
.when('/my-route', {
        title: 'My Title',
        templateUrl: 'my-template.html',
        controller:  'MyCtrl',
        reloadOnSearch: false  // Make sure the page doesn't reload when $location.search is called
      }).

有关更多详细信息，请参见https://docs.angularjs.org/api/ngRoute/service/$routeParams、https://docs.angularjs.org/api/ng/service/$location、https://docs.angularjs.org/api/ngRoute/provider/$routeProvider。