Ui Router：复合视图渲染视图一次答案

【问题标题】：Ui Router: composite view render view onceUi Router：复合视图渲染视图一次
【发布时间】：2015-04-12 13:17:50
【问题描述】：

我想要实现的是有 2 个同级视图，其中 1 个运行一次，另一个将得到更新。

我有一个这样的模板：

<body>
    <ui-view="header />
    <ui-view="body" />
</body>

我有 1 个包罗万象的状态：

.state('root', {
    params: { … },
    resolve: {
        data: fn() { … }
    },
    url: '/{p1:string}/{p2:string}/{p3:string}',
    views: {
        header: {
            controller: 'HeaderCtrl as Header',
            templateUrl: '…'
        },
        body: {
            controllerProvider: fn() { … },
            templateUrl: fn() { … }
        }
    }
});

包罗万象的状态会动态选择适当的控制器、数据和模板。除了 HeaderCtrl 在每次状态更改时都重新执行之外，一切都是笨拙的。我希望它只执行一次。

我尝试创建 2 个状态，root 和 base，其中上述变为 root.base。我将 header 视图移动到新的 root 状态，如下所示：

.state('root', {
    abstract: true,
    url: '/',
    views: {
        header: {
            controller: 'HeaderCtrl as Header',
            templateUrl: '…'
        }
    }
})
.state('root.base', {
    params: { … },
    resolve: {
        data: fn() { … }
    },
    url: '/{p1:string}/{p2:string}/{p3:string}',
    views: {
        body: {
            controllerProvider: fn() { … },
            templateUrl: fn() { … }
        }
    }
});

但只有父 (root) 状态参与。

【问题讨论】：

标签： javascript angular-ui-router state composite-view

【解决方案1】：

我创建了working plunker here。你快到了。这是更新后的状态定义：

$stateProvider
  .state('root', {
    //abstract: true,
    //url: '/',
    views: {
        header: {
            controller: 'HeaderCtrl as Header',
            templateUrl: 'tpl.header.html',
        },
    }
})
.state('root.base', {
    params: { pl : null, p2: "", p3: "abc" },
    resolve: {
        data: function () { return  1 }
    },
    url: '/{p1:string}/{p2:string}/{p3:string}',
    views: {
        'body@': {
            controller: "MyCtrl",
            templateUrl: 'tpl.body.html',
        }
    }
});

首先，非常重要的是，我们必须为子状态视图名称使用绝对命名'body@'。见：

View Names - Relative vs. Absolute Names

在幕后，每个视图都被分配了一个遵循 viewname@statename 方案的绝对名称，其中 viewname 是视图指令中使用的名称，状态名称是状态的绝对名称，例如联系方式。项目。您还可以选择以绝对语法编写视图名称。

例如，前面的例子也可以写成：

.state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
})

其次，没有指定父级的 url...这将使其无法通过 url 访问。

另外，不需要抽象...可以...但是如果我们想使用.when()，最好将其设为非抽象。检查这些：

使用上述内容的工作人员是here

【讨论】：

太好了，谢谢！我昨天正在看，看起来它可能是答案。