angular ui-路由器只刷新页面的一部分，需要多视图？

Question

我正在开发一个 angular 应用程序，我在左侧显示一个导航栏，正常的 ui-sref 会转到 schedules 和clients。在客户视图中，我展示了一个客户列表（动画显示，从左侧滑入）。然后我想实现以下：

点击客户时，将他们的信息加载到屏幕的主要部分
更新 URL 以便他们在此时刷新时会选择相同的客户端
不要重新实例化客户端控制器，因为这样做会重新设置滑入的客户端列表的动画。

我已经让 #1 正常工作，但无法让 2 或 3 以我想要的方式工作。我可以让 url 更新，但这样做会重新实例化客户端控制器并重新设置客户端列表的动画，而且我尝试过的 {notify: false} 或任何其他选项组合似乎都没有做的伎俩。我确实看到了 $urlRouter.deferIntercept() 但我不确定它如何适用于这种情况。我是否需要多个视图才能实现此目的，在其中单击客户端只会更新页面的 "profile" 部分？非常感谢！

Answer 1

您可以通过在 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 状态。子状态之间的导航只会运行子状态转换代码（解析、控制器等）。在您离开 clients 父状态和 return 之前，clients 转换代码不会再次运行。

ui.router readme has good info about nesting states, and they a provide demo app 确实帮助我理解了状态层次结构的概念。该演示与您正在构建的内容有很多相似之处。

angular ui-路由器只刷新页面的一部分，需要多视图？

angular ui-router refresh only one part of the page, need multiple views?

javascript

angularjs

angular-ui-router