AngularJS ui-router 在使用 ng-click 时恢复为

Question

我正在使用 AngularJS 作为学习练习。我正在尝试掌握 AngularJS ui-router (https://github.com/angular-ui/ui-router)，但我遇到了一个问题。

我已经拼凑起来进行说明和复制。

http://plnkr.co/edit/OvmOKPMfeFqNWc7ToCff?p=preview

上面是一个简单的向导类型组件，顶部有标签可以移动到特定步骤，底部有一些下一步/后退按钮可以移动到下一个相关页面。

顶部的选项卡导航工作正常，单击移动会相应地更改视图和 URL。

但是，next/back 按钮的行为非常奇怪，因为它们在您第一次单击 next 时起作用，但之后就不行了。你应该能看到我在说什么。

看起来它尝试导航到正确的视图，但随后立即恢复到否则规则。

我在代码中添加了挂钩，以便在控制台中进行跟踪。本质上，所有 next/back 按钮所做的都称为相关状态，因此 $state.go("step1")、$state.go("step3") 等.

希望我提供了足够的信息，并且希望任何人都可以提供任何见解。

谢谢。

Answer 1

我无法找出确切的原因，但看起来主要区别在于提供的 relative stateObject 传递给 $state.go()。

如果你调试ui-sref的源码，你会注意到他们使用了go函数：

$state.go(ref.state, params, { relative: base });

如果您将链接使用的 base 对象与内部控制器调用使用的默认 ($state.$current) 对象与 $state.go(nextStep) 进行比较，您会发现明显的差异。

虽然我不明白为什么这些会导致您的问题，但您可以通过更新您的 ui 架构来纠正它。创建一个所有步骤都是子状态的父状态，嵌套 ui-views。然后使用父状态控制器来跟踪步数，并管理前进和后退的运动。

Answer 2

您必须从锚点的 href attr 中删除“#”。