Question

我创建的离子应用程序有一个名为master {url：/ master}的状态。状态视图上有两个按钮。每个按钮都显示带有文本的隐藏div。

我想通过此规则实施历史记录跟踪：

当用户点击第一个按钮时，url应附加firstOpened = true
当用户点击第二个按钮时，url应附加secondOpened = true
控制器应保持不变（无需重新初始化）
浏览器的后退按钮应该撤消上一个操作，例如：如果用户打开第一个div然后返回按钮应该关闭此div并恢复URL而不重新加载页面。
如果主状态的历史记录为空，则后退按钮应恢复以前的状态

如果我使用$ state.go来更改url，那么ionic会重新初始化状态和所有控制器。看起来我从一个视图移动到另一个视图（从一个状态到另一个状态），但我不想改变状态，我想更新网址并推送历史记录。我想在没有重新初始化的情况下使用相同的状态。

我创建plunker没有历史记录跟踪。有人可以帮我实现历史跟踪吗？

script.js（参见）：

angular.module('starter', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  var controller = 0;

  $urlRouterProvider.otherwise("/master");
  $stateProvider.state('master', { 
    url: '/master?firstOpened&secondOpened',
    views: {
      'default': {
        templateUrl: 'content.html',
        controller: function($scope, $ionicHistory, $stateParams, $state) {
            console.log('Initing controller...');
            controller = controller + 1;
            $scope.controller = controller;

            $scope.firstOpened = $stateParams.firstOpened
            $scope.secondOpened = $stateParams.secondOpened

            $scope.openFirst = function() { 
              $scope.firstOpened = true;
            };

            $scope.openSecond = function() { 
              $scope.secondOpened = true;
            };
          }
        }
      }
  })
})

Answer 1

关键是，您不会在点击时更改状态。您只是更改范围变量，但这并不意味着对URL或历史记录进行任何更改。

要获得历史记录支持，您需要更改状态并在滑块上放置ng-show。我是这样用ui-sref做的：

<ion-content>
  <h1>Controller №{{::controller}}</h1>

  <button class="button" ui-sref='master({firstOpened: true, secondOpened: false})'>Open first</button>
  <button class="button" ui-sref='master({firstOpened: false, secondOpened: true})'>Open second</button>

  <div style="background-color: #FF0000;" ng-show="{{firstOpened}}">
    <h1>Slider 1</h1>
  </div>
  <div style="background-color: #00FF00;" ng-show="{{secondOpened}}">
    <h1>Slider 2</h1>
  </div>
</ion-content>

你的控制器只需跟踪stateParams，就像你已经做过的那样：

controller: function($scope, $ionicHistory, $stateParams, $state) {
  console.log('Initing controller...');
  controller = controller + 1;

  $scope.controller = controller;

  $scope.firstOpened = $stateParams.firstOpened;
  $scope.secondOpened = $stateParams.secondOpened;
}

我已更新您的plunker code here。

如您所见，我不得不删除幻灯片动画，因为它对firstOpened和secondOpened值没有做出正确反应。但这是另一个问题，我相信再次开始工作没什么大不了的。

国家历史

1 个答案: