Question

我想要实现的是2个兄弟视图，其中1个是一次运行，另一个是更新。

我有一个这样的模板：

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

我有一个全能状态：

.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() { … }
        }
    }
});

catch-all状态动态地选择适当的控制器，数据和模板。除了在每次状态变化时重新执行HeaderCtrl之外，一切都很糟糕。我希望它只执行一次。

我尝试创建2个状态， root 和 base ，其中上面的内容变为 root.base 。我将标题视图移动到新的 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 ）状态参与。

Answer 1

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

$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是视图指令中使用的名称，状态名称是状态＆＃39 ; s绝对名称，例如contact.item。您还可以选择以绝对语法编写视图名称。

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

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

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

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

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

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

1 个答案: