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 int 他我想加载更多东西的地方 dashboard.html ，但这不起作用。它加载 dashboard.html 而没有在 template.html 中创建的模板。我创建了很多对我不起作用的文档。有什么想法吗？

这里有一个简单的想法示例：https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview

Answer 1

有 updated plunker 和正在工作的 plunker。

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 - Nested States with multiple layouts

播放或观察变化 here

Angular UI-Router 个孩子

Angular UI-Router childs

state

angularjs

angular-ui

angular-ui-router