UI路由器从孩子更新父视图

Question

我是使用 Angular UI Router 的新手，我似乎无法从其子视图更新父视图。

我有以下 HTML 结构（为了便于阅读，重新构建了视图，显然视图位于单独的 html 文件中）。

<div ui-view="main">
    { main content }
    <div ui-view="tab">
        { tabbed content }
    </div>
</div>

在tab里面我有以下sref：

<span ui-sref="silverstone.platforms.view({_id: platform._id})">{{platform.name}}</span>

这是我的状态：（我使用的是 webpack，因此是 require）

$stateProvider
    .state('silverstone', {
        url: '/silverstone',
        views: {
            'main': {
                controller: 'SilverstoneCtrl',
                template: require('./templates/index.html')
            }
        }
    });

$stateProvider
    .state('silverstone.platforms', {
        url: '/platforms',
        views: {
            'tab': {
                controller: 'SilverstoneCtrl',
                template: require('./templates/platforms.html')
            }
        }
    });

$stateProvider
    .state('silverstone.platforms.view', {
        url: '/:_id',
        views: {
            'main': {
                controller: 'SilverstoneCtrl',
                template: require('./templates/platform-view.html')
            }
        }
    });

当点击上述 sref 时，“主”视图需要更新。 URL 正在更新，但视图没有...？

Answer 1

我在 silverstone.platforms.view 状态中缺少 @ 以显式处理父视图。

$stateProvider
        .state('silverstone.platforms.view', {
            url: '/:_id',
            views: {
                'main@': {
                    controller: 'SilverstoneCtrl',
                    template: require('./templates/platform-view.html')
                }
            }
        });

Answer 2

在你的ui-sref 链接中使用reload: true 参数，像这样。

ui-sref="silverstone.platforms.view({_id: platform._id})" ui-sref-opts="{reload: true}"

编辑： 也许您的问题是由嵌套状态与平面模板结构相结合引起的。 其他解决方案可能是正确嵌套您的模板，如状态。 例如，我们有状态app 和app.substate，那么我们有两个用于这两种状态的模板。 app 状态的模板包含 ui-view 指令。 （这意味着每个状态都包含用于注入子状态模板的新 ui-view 指令）。状态默认嵌套，这将表示适当嵌套的模板。