angular ui-router，如何使用更新的URL嵌套狀態

Question

我想知道在運行類似向導的設置時如何將三個狀態連接在一起。 我正在開發的應用程序有一個“參數”屏幕，用戶可以通過3個步驟輸入一些參數。 這3個步驟應該在同一頁面上連接，但只有在需要填寫特定步驟時才能看到當前步驟。

有點像這樣：

用戶從： parameters/step-1

• 第一個div是可見的
• 隱藏第二個div（或處於某種阻塞/鎖定狀態）
• 隱藏第三個div（或處於某種阻塞/鎖定狀態）

用戶填寫步驟1並導航到parameters/step-2

• 第一個div是可見的
• 第二個div是可見的
• 隱藏第三個div（或處於某種阻塞/鎖定狀態）

用戶填寫步驟2並導航到parameters/step-3

• 第一個div是可見的
• 第二個div是可見的
• 第三個div是可見的

這是我當前的設置，這是正確的方法，或者我應該使用嵌套視圖，然后根據當前路線手動顯示/隱藏每個視圖？ 如果是這樣，我該怎么做？

.state('test.parameters', {
  url: "/parameters",
  templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
  url: "/step-1",
  templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
  url: "/step-2",
  templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
  url: "/step-3",
  templateUrl: "views/partials/step3.html"
})

Answer 1

ng-newsletter網站上的這篇文章描述了您的確切示例。 有人也評論了這篇文章並添加了一個向導jsFiddle 。 我已經調整了文章中的代碼以適合您的示例。

要回答這里的問題，你要做的是將test.parameters設置為抽象狀態，這意味着你不能直接引用它，但它確實為你提供了test.parameters的抽象URL。 一旦抽象狀態的子節點被導航到（由用戶或腳本中的一部分），該URL將與子URL一起更新為抽象狀態的URL（在您的情況下將是[ mainUrl] /參數/ TEST1）。 每個test.parameters.step [x]狀態都是抽象狀態的子節點，您可以使用您提到的templateUrl中的標記中的sref元素在它們之間切換。 我離開了$ urlRouterProvider，向您展示如何訪問抽象狀態的第一步。

$urlRouterProvider.otherwise('/test.parameters/step1');

$stateProvider
.state('test.parameters', {
    abstract: true,
    url: '/parameters',
    templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
    url: '/step1',
    templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
    url: '/step2',
    templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
    url: '/step3',
    templateUrl: "views/partials/step3.html"
})