Angular UI-Router的子节点

Question

我有一个app.config与UI-Router。它有一个登录页面与它的控制器，recoverLogin和我想把一个模板页脚，页眉和更多的东西与新的状态，可以加载到模板(在一个特定的地方)。

我的模块是:

var app = angular.module("app", [
    "ui.router", 
    "pascalprecht.translate"
]);

我的路线是;

app.config(function($stateProvider, $urlRouterProvider)
{
    $stateProvider
    .state("login", {
        url: "/login",
        templateUrl: "views/accessControl/login.html",
        controller: "loginCtrl"
    });
    $stateProvider
    .state("recoverLogin", {
        url: "/recoverLogin",
        templateUrl: "views/accessControl/recoverLogin.html",
        controller: "recoverLoginCtrl"
    });
    $stateProvider
    .state("template", {
        url: "/template",
        templateUrl: "views/templates/template.html",
        controller: "templateCtrl"
    })
    .state("template.dashboard", {
        url: "/dashboard",
        templateUrl: "views/dashboard/dashboard.html",
        controller: "dashboardCtrl"
    }) 
    $urlRouterProvider.otherwise("login");
})

我有在我的索引<ui-view></ui-view>的地方加载和另一个<ui-view></ui-view>在template.html的地方我想加载更多的东西，如dashboard.html，但这不起作用。它加载dashboard.html时没有在template.html中创建模板。我发现了很多不适合我的文档。任何想法?

这里有一个关于这个想法的例子:https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview

Answer 1

有更新的柱塞和工作柱塞

mainTemplate状态的模板现在看起来像这样:

place for main:
<div ui-view="main"></div>

place for other:
<div ui-view="other"></div>

所以它有两个(可能是更多)的地方更多的东西。这是重新定义的状态:

.state("mainTemplate.dashboard", {
    name: "main",
    url: "/dashboard",
    views: {
      'main' : {
        templateUrl: "dashboard.html",
        controller: "dashboardCtrl"
      },
      'other' : {
        template: "<h2>other view</h2>",
      }
    }
});

我们可以看到 views : {} 对象被用来为更多的目标定义多个内容。在这里阅读更多细节:

• Angular UI Router -有多个布局的嵌套状态
嵌套状态或视图布局与左栏在ui-router?

播放或观察这里的变化