2015-06-26 120 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