javascript - Angular ui-router仅刷新页面的一部分，需要多个 View 吗？

Question

我正在构建一个 Angular 应用程序，我在左侧显示一个导航栏，其中正常的 ui-sref 会进入诸如 schedules 和 clients 之类的状态。在客户端 View 中，我呈现了一个客户端列表(以动画方式显示，从左侧滑入)。然后我想实现以下目标:

1. 点击客户后，将其信息加载到屏幕的主要部分
2. 更新网址，以便在此时刷新时会选择相同的客户端
3. 不要重新实例化客户端 Controller ，因为这样做会重新动画滑入的客户端列表。

我已经让 #1 工作了，但无法让 2 或 3 以我想要的方式工作。我可以获取要更新的网址，但这样做会重新实例化客户端 Controller 并重新设置客户端列表的动画，并且没有任何 {notify: false} 或我所拥有的任何其他选项组合尝试过似乎可以解决问题。我确实看到了 $urlRouter.deferIntercept() 但我不确定这如何适用于这种情况。我是否需要多个 View 来实现此目的，其中单击客户端仅更新页面的“个人资料”部分？非常感谢!

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 状态。子状态之间的导航将仅运行子状态转换代码(解析、 Controller 等)。在您离开 clients 父状态并返回之前，clients 转换代码将不会再次运行。

ui.router readme有关于嵌套状态的良好信息，并且他们提供 demo app这确实帮助我理解了国家等级制度的概念。该演示与您正在构建的内容有很多相似之处。