我正在构建一个 Angular 应用程序,我在左侧显示一个导航栏,其中正常的 ui-sref 会进入诸如 schedules
和 clients
之类的状态。在客户端 View 中,我呈现了一个客户端列表(以动画方式显示,从左侧滑入)。然后我想实现以下目标:
- 点击客户后,将其信息加载到屏幕的主要部分
- 更新网址,以便在此时刷新时会选择相同的客户端
- 不要重新实例化客户端 Controller ,因为这样做会重新动画滑入的客户端列表。
我已经让 #1 工作了,但无法让 2 或 3 以我想要的方式工作。我可以获取要更新的网址,但这样做会重新实例化客户端 Controller 并重新设置客户端列表的动画,并且没有任何 {notify: false}
或我所拥有的任何其他选项组合尝试过似乎可以解决问题。我确实看到了 $urlRouter.deferIntercept()
但我不确定这如何适用于这种情况。我是否需要多个 View 来实现此目的,其中单击客户端仅更新页面的“个人资料”部分?非常感谢!
最佳答案
您可以通过在 clients
子状态中加载特定客户端来实现此目的,并使用标识该客户端的关联 URL。
$stateProvider.state('clients', {
url: 'clients/',
resolve: {
clients: function () {
// return the clients collection or a promise which will resolve with it
}
}
// template, controller, etc
});
$stateProvider.state('clients.client', {
url: 'client/{id:[1-9][0-9]+}/', // as this is a substate, this gets appended the the parent state's URL for an end result of something like /#/clients/client/1
resolve: {
client: ['$stateParams', 'clients', function ($stateParams, clients) {
// Lookup the client in clients using $stateParams.id and return it or a promise that will resolve with it
}]
}
// template, controller, etc
});
然后在 clients
状态的模板中放置一个 ui-view
,以便为 clients.client
子状态提供渲染的位置。
当您首次加载任何以 clients/
开头的 URL 时,您将进入 clients
状态。子状态之间的导航将仅运行子状态转换代码(解析、 Controller 等)。在您离开 clients
父状态并返回之前,clients
转换代码将不会再次运行。
ui.router readme有关于嵌套状态的良好信息,并且他们提供 demo app这确实帮助我理解了国家等级制度的概念。该演示与您正在构建的内容有很多相似之处。
关于javascript - Angular ui-router仅刷新页面的一部分,需要多个 View 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30277523/