2015-06-26 54 views
0

I`am创建了一个名为master {url:/ master}的离子应用程序。状态视图上有两个按钮。每个按钮都显示带有文本的隐藏div。历史内部状态

我想通过这个规则来实现历史追踪:

  • 当第一个按钮用户点击则URL应与firstOpened =真正的附加
  • 当第二个按钮用户点击则URL应该有附加secondOpened =真
  • 控制器应保持不变(无需重新初始化)
  • 回到浏览器的按钮应该撤消最后一个动作,例如:如果用户打开第一个div然后后退按钮应该关闭这个div并没有页面还原网址相对OAD。
  • 如果主状态的历史记录为空,则返回按钮应该如果exsits

如果我使用$ state.go更改URL,然后离子将重新初始化状态,所有控制器恢复以前的状态。它看起来像我从一个视图移动到另一个视图(从一个状态到另一个状态),但我不想更改状态,我想更新url并推送历史记录。我想在不重新初始化的情况下使用相同的状态。

I`am创建了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; 
      }; 
      } 
     } 
     } 
    }) 
}) 

回答

0

的一点是,你不改变点击的状态。您只是更改范围变量,但这并不意味着对URL或历史记录进行任何更改。

要获得历史支持,您需要更改状态并在滑块上放置一个ng表示。

<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我与UI的序列S这样做了。

正如您所看到的,我必须删除幻灯片动画,因为它对firstOpened和secondOpened值没有正确反应。但这是另一个问题,我相信让它重新工作并没有什么大不了的。

+0

您的解决方案无法解决我的问题。如果你用state.go改变状态,那么ui-router会创建新的控制器。每按一下按钮或历史导航都会导致页面上显示的控制器索引发生变化。 – caiiiycuk