本文共 6621 字，大约阅读时间需要 22 分钟。
本文翻译自：
My question involves how to go about dealing with complex nesting of templates (also called partials ) in an AngularJS application. 我的问题涉及如何在AngularJS应用程序中处理模板 （也称为部分 ）的复杂嵌套。
The best way to describe my situation is with an image I created: 描述我的情况的最好方法是使用我创建的图像：
As you can see this has the potential to be a fairly complex application with lots of nested models. 正如您所看到的，这可能是一个包含大量嵌套模型的相当复杂的应用程序。
The application is single-page, so it loads an index.html that contains a div element in the DOM with the ng-view attribute. 该应用程序是单页面的，因此它使用ng-view属性加载一个index.html ，其中包含DOM中的div元素。
For circle 1 , You see that there is a Primary navigation that loads the appropriate templates into the ng-view . 对于圆圈1 ，您会看到有一个主导航将适当的模板加载到ng-view 。 I'm doing this by passing $routeParams to the main app module. 我是通过将$routeParams传递给主app模块来实现的。 Here is an example of what's in my app: 这是我的应用程序中的一个示例：
angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }). when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }). when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' }) }]); In circle 2 , the template that is loaded into the ng-view has an additional sub-navigation . 在圆圈2中 ，加载到ng-view的模板具有附加的子导航 。 This sub-nav then needs to load templates into the area below it - but since ng-view is already being used, I'm not sure how to go about doing this. 然后这个子导航需要将模板加载到它下面的区域 - 但由于ng-view已被使用，我不知道如何去做。
I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex. 我知道我可以在第一个模板中包含其他模板，但这些模板都非常复杂。 I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children. 我想将所有模板分开，以使应用程序更容易更新，并且不必依赖于必须加载的父模板才能访问其子代。
In circle 3 , you can see things get even more complex. 在第3圈中 ，您可以看到事情变得更加复杂。 There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4 子导航模板可能具有第二个子导航 ，需要将其自己的模板加载到圆圈4中的区域
How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another? 如何构建AngularJS应用程序来处理模板的这种复杂嵌套，同时保持它们彼此分离？
#1楼
参考：
#2楼
Well, since you can currently only have one ngView directive... I use nested directive controls. 好吧，因为你现在只能有一个ngView指令...我使用嵌套的指令控件。 This allows you to set up templating and inherit (or isolate) scopes among them. 这允许您在它们之间设置模板和继承（或隔离）范围。 Outside of that I use ng-switch or even just ng-show to choose which controls I'm displaying based on what's coming in from $routeParams. 除此之外，我使用ng-switch甚至只是ng-show来根据$ routeParams中的内容选择我正在显示的控件。
EDIT Here's some example pseudo-code to give you an idea of what I'm talking about. 编辑这里有一些示例伪代码，可以让您了解我在说什么。 With a nested sub navigation. 使用嵌套的子导航。
Here's the main app page 这是主应用页面
Page 1Page 2Page 3
Directive for the sub navigation 子导航指令
app.directive('mySubNav', function(){ return { restrict: 'E', scope: { current: '=current' }, templateUrl: 'mySubNav.html', controller: function($scope) { } };}); template for the sub navigation 子导航的模板
Sub Item 1Sub Item 2Sub Item 3
template for a main page (from primary nav) 主页面的模板（来自主导航）
Controller for a main page. 主页的控制器。 (from the primary nav) （来自主导航）
app.controller('page1Ctrl', function($scope, $routeParams) { $scope.sub = $routeParams.sub;}); Directive for a Sub Area 子区域的指令
app.directive('mySubArea1', function(){ return { restrict: 'E', templateUrl: 'mySubArea1.html', controller: function($scope) { //controller for your sub area. } };}); #3楼
UPDATE: 更新：
For subsections it's as easy as leveraging strings in ng-include: 对于小节，它就像在ng-include中利用字符串一样简单：
Or you can create an object in case you have links to sub pages all over the place: 或者你可以创建一个对象，以防你到处都有到子页面的链接：
$scope.pages = { page1: 'section1/subpage1.htm', ... }; Or you can even use $routeParams 或者你甚至可以使用$routeParams
$routeProvider.when('/home', ...);$routeProvider.when('/home/:tab', ...);$scope.params = $routeParams; You can also put an ng-controller at the top-most level of each partial 您还可以将ng控制器放在每个部分的最顶层
#4楼
You may checkout this library for the same purpose also: 您也可以出于同样目的签出此库：
It looks like what you are looking for, and it is much simpler to use than ui-router. 它看起来像你在寻找，它比ui-router更简单。 From the : 从 ：
JS: JS：
$routeSegmentProvider.when('/section1', 's1.home').when('/section1/:id', 's1.itemInfo.overview').when('/section2', 's2').segment('s1', { templateUrl: 'templates/section1.html', controller: MainCtrl}).within(). segment('home', { templateUrl: 'templates/section1/home.html'}). segment('itemInfo', { templateUrl: 'templates/section1/item.html', controller: Section1ItemCtrl, dependencies: ['id']}). within(). segment('overview', { templateUrl: 'templates/section1/item/overview.html'}). Top-level HTML: 顶级HTML：
Nested HTML: 嵌套HTML：
Section 1
Section 1 contents.
#5楼
You may use ng-include to avoid using nested ng-views. 您可以使用ng-include来避免使用嵌套的ng视图。
My index page I use ng-view. 我的索引页面使用ng-view。 Then on my sub pages which I need to have nested frames. 然后在我需要嵌套框架的子页面上。 I use ng-include. 我用ng-include。 The demo shows a dropdown. 该演示显示了一个下拉列表。 I replaced mine with a link ng-click. 我用链接点击替换了我的。 In the function I would put $scope.template = $scope.templates[0]; 在函数中我会放$ scope.template = $ scope.templates [0]; or $scope.template = $scope.templates[1]; 或$ scope.template = $ scope.templates [1];
$scope.clickToSomePage= function(){ $scope.template = $scope.templates[0];}; #6楼
Angular ui-router supports nested views. Angular ui-router支持嵌套视图。 I haven't used it yet but looks very promising. 我还没用过，但看起来非常有前途。
转载地址：http://qscnb.baihongyu.com/