Question

我正在构建一个角度应用，我在左边显示一个导航栏，正常的ui-sref会转到schedules和clients等状态。在客户端视图中，我提供了一个客户端列表（其中包含动画，从左侧滑入）。然后我想实现以下目标：

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

我有＃1工作，但不能以我想要的方式工作2或3。我可以获取更新的URL，但这样做会重新实例化客户端控制器并重新设置客户端列表的动画，并且我尝试过的任何{notify: false}或任何其他选项组合似乎没有特技。我确实看到了$urlRouter.deferIntercept()，但我不确定这种情况是如何适用的。我需要多个视图来实现这一点，点击客户端只需更新＆＃34;配置文件＆＃34;页面的一部分？非常感谢！

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
});

然后在ui-view状态的模板中放置clients，以便将clients.client子状态提供给呈现的位置。

当您首次加载以clients/开头的任何网址时，您将进入clients状态。导航到子状态和子状态之间只会运行子状态转换代码（解析，控制器等）。在您离开clients父状态并返回之前，clients转换代码将不会再次运行。

ui.router readme有关于嵌套状态的良好信息，它们提供了demo app，它真正帮助我理解了状态层次结构的概念。该演示与您正在构建的内容有很多相似之处。

angular ui-router只刷新页面的一部分，需要多个视图吗？

1 个答案: