UI-Router - 更改$狀態而不重新顯示頁面

Question

我一直在看這些頁面（1,2,3）。我基本上想要更改我的$state，但我不希望頁面重新加載。

我目前在頁面/schedules/2/4/2014，我想進入編輯模式，當我點擊一個按鈕，並使URL變成/schedules/2/4/2014/edit。

我的edit狀態只是$scope.isEdit = true，所以沒有重新加載整個頁面的要點。但是，我確實希望$state和/或url發生更改，以便用戶在刷新頁面時以編輯模式啓動。

我該怎麼辦？

Answer 1

對於這個問題，你可以創建一個具有子狀態既不templateUrl也不controller，並提前states通常之間：

// UPDATED 
$stateProvider 
    .state('schedules', { 
     url: "/schedules/:day/:month/:year", 
     templateUrl: 'schedules.html', 
     abstract: true, // make this abstract 
     controller: function($scope, $state, $stateParams) { 
      $scope.schedDate = moment($stateParams.year + '-' + 
             $stateParams.month + '-' + 
             $stateParams.day); 
      $scope.isEdit = false; 

      $scope.gotoEdit = function() { 
       $scope.isEdit = true; 
       $state.go('schedules.edit'); 
      }; 

      $scope.gotoView = function() { 
       $scope.isEdit = false; 
       $state.go('schedules.view'); 
      }; 
     }, 
     resolve: {...} 
    }) 
    .state('schedules.view', { // added view mode 
     url: "/view" 
    }) 
    .state('schedules.edit', { // both children share controller above 
     url: "/edit" 
    }); 

一個重要concept這裏要說的是，在ui-router，當應用程序在一個特定的狀態 - 當一個國家處於「積極」狀態 - 其祖先國家的所有國家也都隱含地活躍起來。

因此，在這種情況下，

• 當從視圖模式的應用進展到編輯模式，其母公司狀態schedules（連同其templateUrl，controller甚至resolve）仍將被保留。
• 由於祖先狀態隱式激活，即使正在刷新子狀態（或從書籤直接加載），頁面仍會正確呈現。

Answer 2

REF：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#statetransitiontoto-toparams--options

$state.transitionTo('yourState', params, {notify: false});