Angular：如何为不同的视图使用不同的模板？

我有一个AngularJS网站。看惯了这样的事情的index.html：Angular：如何为不同的视图使用不同的模板？

... 
<div class="layout stuff headers whatever">My awesome header layout</div> 
<div class="container" ng-view=""></div> 
<div class="layout stuff footers whatever">My tubular footer layout</div> 
...

一般来说，站点布局在布局的东西上面和下面的视图定义。

与我们的设计师合作，现在我有三种不同的基本页面布局。所有原始视图都具有相同（通用）布局，但有六个新页面，每个页面都有两个新布局之一。

我想我可能将每个布局的标题东西移动到部分和每个布局的部分脚注东西变成部分。然后，我会做一个NG包括，在每个视图，就像这样：

<div ng-include src="'partials/layout1-header.html'"></div> 
... view content here ... 
<div ng-include src="'partials/layout1-footer.html'"></div>

Ø我miseram！这是丑陋的，让我觉得我需要淋浴干掉。

有没有更好的解决方案？角有没有办法处理这个我还没遇到过的？

注意： 我不是特别有兴趣使用angular-ui-route ......但我愿意相信。

来源

2013-10-31 Sir Robert

可以使用'$ routeProvider'而不使用'angular-ui-router' .. ..会比你想要的更简单。浏览文档站点上的教程。同时关注文档中的'ng-view' – charlietfl

Hrm。我已经使用$ routeProvider作为主路由。我有一个很好的观点和控制器。我试图弄清楚如何改变*视图外部的布局样板文件。我将重新阅读视图信息，看看我是否错过了一些东西...... –

我猜我没有遵循这个问题......也许你只需要将包含内容包装在指令中......一个演示将有助于更好地理解 – charlietfl

好的，所以看起来最好的方法是使用ui-router。

对于它的价值：

假设以下页面布局类型：

信息
仪表盘
查找

而且，我们假设这些布局都有不同的看法，比如：

仪表板/帐号/概述
仪表板/帐号/设置
仪表板/报告
仪表板/报告/总结
...等等...

首先，为您的网站的每级创建模板（假设没有è路径的“帐户”部分的xplicit模板 - 概述，设置，报告内容等全部只是加载到仪表板布局中。

./partials/dashboard.html 
./partials/dashboard/account/overview.html 
./partials/dashboard/account/settings.html

你要建立ui-router这样的：

$stateProvider 
    .state("dashboard", { 
    url: "/dashboard", 
    templateUrl: "partials/dashboard.html" 
    }) 
    .state("dashboard.account", { 
    url: "/account", // notice this chains from "/dashboard" implicitly 
    template: "<div ui-view></div>" // we don't need a file for this pass-through 
    }) 
    .state("dashboard.account.overview", { 
    url: "/overview", 
    templateUrl: "partials/dashboard/account/overview", 
    controller: "DashboardAccountOverviewCtrl" 
    })

等。可以按照您的预期指定控制器（请参阅dashboard.account.overview）。

这样做可以让你指定哪些布局应该在“仪表板”或“信息”等级使用，并为其他内容使用各种“内部”模板（这就是“嵌套视图” ）。

HTH。

来源

2013-11-01 18:50:54

Angular：如何为不同的视图使用不同的模板？

回答

相关问题