Angular UI-Router childs

我有一个app.config与UI路由器。它有一个登录页面，里面有它的控制器，recoverLogin，我想用一个可以加载到模板中的新状态（在特定场景中）放置一个包含页脚，标题和更多内容的模板。Angular UI-Router childs

我的模块是：

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中创建模板。我创建了很多不适合我的文档。任何想法？

在这里有这个想法的plunker例如：https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview

来源

2016-10-24 Noark

哪里是你的模板内容？显示它，创建一个运动员（甚至打破），你会得到更多的关注 –

确定更新的内容 – Noark

我检查了你的工作（很好的工作），并调整了蹲下工作。更多的细节在答案..与UI-Router祝你好运 –

有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 : {}对象。阅读在这里，更多的细节：

播放或观察其变化here

来源

2016-10-25 08:11:35

Angular UI-Router childs

回答

相关问题