Angular ui 路由器嵌套状态但相同的控制器/视图（无页面转换）

Question

我有一个场景是我正在创建一个应该可编辑的页面。单击编辑按钮时，属性名称应更改为文本框（或日期选择器等，具体取决于属性的“类型”）。

现在我希望将 url 更新为“/edit”，但我实际上并不需要页面转换。由于控制器和视图将保持不变，但布尔属性 editMode 将设置为 true，因此输入字段将变为可见。

我可以为此在$stateProvider 创建一个嵌套状态吗？这里甚至需要嵌套状态吗？我认为这是因为虽然不需要页面转换 editMode 仍然是一个状态（P.s. 在考虑状态时我喜欢路由！）。

如何使用 ui 路由器实现这一点？

谢谢。

表单的测试小提琴：没有页面转换。只需切换表单字段。

http://jsfiddle.net/s82h6kkp/

Answer 1

你必须这样做：

$stateProvider
    .state('users', {
        url: '/users',
        controller: 'users',
        templateUrl: 'users/users.html'
    })
    .state('users.edit', {
        url: '/users/edit',
        views: {
            edit: {
                templateUrl: 'users/edit.html'
            }
        }
    })

别忘了渲染你的编辑视图

<!-- users/users.html -->
<div ui-view="edit"></div>