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，否则在设置route参数时页面将刷新：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 了解更多详情。

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

1 个答案: