州内历史

Question

我创建了具有一种称为 master {url: /master} 的状态的 ionic 应用程序。状态视图上有两个按钮。每个按钮都显示带有文本的隐藏 div。

我想通过这个规则实现历史跟踪：

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

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

我创建 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 值做出正确反应。但这是另一个问题，我相信让它再次工作没什么大不了的。