我的问题涉及到如何处理AngularJS应用程序中复杂的模板嵌套(也称为分部)。
最好的方式来描述我的情况是用我创造的图像:
正如您所看到的，这可能是一个具有大量嵌套模型的相当复杂的应用程序。
该应用程序是单页的，因此它加载一个index.html，该html在DOM中包含一个带有ng-view属性的div元素。
对于循环1，可以看到有一个Primary导航，它将适当的模板加载到ng-view中。我通过将$routeParams传递给主应用模块来做到这一点。下面是我的应用程序中的一个例子:
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' })
}]);
在循环2中，加载到ng-view中的模板有一个额外的子导航。这个子导航然后需要将模板加载到它下面的区域-但由于ng-view已经被使用，我不确定如何去做这件事。
我知道我可以在第一个模板中包含其他模板，但这些模板都非常复杂。我希望将所有模板分开，以便使应用程序更容易更新，并且不依赖于必须加载父模板才能访问其子模板。
在循环3中，你可以看到情况变得更加复杂。有可能子导航模板会有第二个子导航，它需要将自己的模板加载到圆圈4的区域中
如何构造一个AngularJS应用程序来处理如此复杂的模板嵌套，同时又使它们彼此独立呢?
更新:看看AngularUI的新项目来解决这个问题
对于子节，就像利用ng-include中的字符串一样简单:
<ul id="subNav">
<li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
<li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
<li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>
或者你可以创建一个对象，以防你到处都有子页面的链接:
$scope.pages = { page1: 'section1/subpage1.htm', ... };
<ul id="subNav">
<li><a ng-click="subPage='page1'">Sub Page 1</a></li>
<li><a ng-click="subPage='page2'">Sub Page 2</a></li>
<li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>
或者你甚至可以使用$routeParams
$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
<ul id="subNav">
<li><a href="#/home/tab1">Sub Page 1</a></li>
<li><a href="#/home/tab2">Sub Page 2</a></li>
<li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>
您还可以在每个部分的最顶层放置一个ng-controller
你也可以为了同样的目的签出这个库:
http://angular-route-segment.com
它看起来就像你正在寻找的东西，而且比ui-router使用起来简单得多。来自演示站点:
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'}).
顶级HTML:
<ul>
<li ng-class="{active: $routeSegment.startsWith('s1')}">
<a href="/section1">Section 1</a>
</li>
<li ng-class="{active: $routeSegment.startsWith('s2')}">
<a href="/section2">Section 2</a>
</li>
</ul>
<div id="contents" app-view-segment="0"></div>
嵌套的HTML:
<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>
我也在纠结于Angular中的嵌套视图。
一旦我掌握了ui-router，我就知道我再也不会回到angular的默认路由功能了。
下面是一个使用多级视图嵌套的示例应用程序
app.config(function ($stateProvider, $urlRouterProvider,$httpProvider) {
// navigate to view1 view by default
$urlRouterProvider.otherwise("/view1");
$stateProvider
.state('view1', {
url: '/view1',
templateUrl: 'partials/view1.html',
controller: 'view1.MainController'
})
.state('view1.nestedViews', {
url: '/view1',
views: {
'childView1': { templateUrl: 'partials/view1.childView1.html' , controller: 'childView1Ctrl'},
'childView2': { templateUrl: 'partials/view1.childView2.html', controller: 'childView2Ctrl' },
'childView3': { templateUrl: 'partials/view1.childView3.html', controller: 'childView3Ctrl' }
}
})
.state('view2', {
url: '/view2',
})
.state('view3', {
url: '/view3',
})
.state('view4', {
url: '/view4',
});
});
可以看到有4个主视图(view1,view2,view3,view4)， view1有3个子视图。
更新:看看AngularUI的新项目来解决这个问题
对于子节，就像利用ng-include中的字符串一样简单:
<ul id="subNav">
<li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
<li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
<li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>
或者你可以创建一个对象，以防你到处都有子页面的链接:
$scope.pages = { page1: 'section1/subpage1.htm', ... };
<ul id="subNav">
<li><a ng-click="subPage='page1'">Sub Page 1</a></li>
<li><a ng-click="subPage='page2'">Sub Page 2</a></li>
<li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>
或者你甚至可以使用$routeParams
$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
<ul id="subNav">
<li><a href="#/home/tab1">Sub Page 1</a></li>
<li><a href="#/home/tab2">Sub Page 2</a></li>
<li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>
您还可以在每个部分的最顶层放置一个ng-controller
