是否可以更改状态（更新地址栏）并仅使用Angular的ui-router重新加载特定视图？

Question

我正在使用Angular和ui-router开发应用程序。我有一个在右侧有一个搜索窗格的布局，以及一个显示搜索结果的内容窗格。在搜索窗格的控制器中，我一直在使用设置搜索参数的共享服务。在内容控制器中，我导入了同样的服务，并监视其属性何时更改。如果您查看下面的布局，您会看到用户可以输入搜索字词，以及使用下拉条件过滤结果。过滤器允许按市场（1）/部门（2）/类别（3）细化搜索结果。

此设置在过去几个月中一直没有问题。但是，现在我想添加搜索记录，因此，如果用户使用字词进行搜索，或按类别进行过滤，则地址栏会使用/:searchTerm?categoryId=foo进行更新。我的ui-router配置中有一个状态设置：

.state('app.search', {
    url: '/search/:searchTerm?categoryId&attributes',
    templateUrl: 'tpl/search_results.html',
    controller: 'SearchResultsController'
})

这有效，我可以根据需要保留搜索记录。但是，我在我的SearchController中使用$state.go来更新地址栏中的网址，并且我注意到我的窗格（搜索和内容）都被重新加载。是否可以更改状态（更新地址栏）并仅重新加载内容窗格？

Answer 1

您可能需要将州分为两种状态：

.state('app.search', {
    url: '/search',
    template: '<div ui-view></div><div>search bar</div>',
    controller: 'SearchController'
})

.state('app.search.results', {
    url: '/:searchTerm?categoryId&attributes',
    templateUrl: 'tpl/search_results.html',
    controller: 'SearchResultsController'
})

因此，第一个州有一个模板，其中包含结果视图和实际搜索侧边栏。

这样您只需从SearchController调用$state.go('app.search.results', {...})，它只应更新子视图，因为您只更改该视图的参数。