javascript - 模板的嵌套

  显示原文与译文双语对照的内容

我的问题涉及如何在一个AngularJS应用程序中处理复杂的模板 ( 也叫做分 partials )的复杂嵌套。

描述我的情况的最好方法是使用我创建的图像:

AngularJS Page Diagram

就像你可以看到的,这可能是一个相当复杂的应用程序,有很多嵌套模型。

应用程序是 single-page,因此它加载了一个 index.html,它包含一个在DOM中包含 ng-view 属性的div元素。

为圆 1,你会看到有一个主导航到 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 有额外 sub-navigation 。 这个sub-nav需要将模板加载到下面的区域中- 但是由于ng-view已经被使用,我不确定如何做这个。

我知道我可以在 1版模板中包含其他模板,但是这些模板都会非常复杂。 我想让所有模板保持独立,以便使应用程序更易于更新,并不依赖于必须加载的父模板来访问其子模板。

圆内 3中,你可以看到事情变得更加复杂。 有潜在的sub-navigation模板将第二sub-navigation,需要自己的模板和加载到地区圆 4

如何构建一个AngularJS应用来处理这种复杂的模板嵌套,同时将它们彼此分开?

时间:

既然你现在只能有一个ngView指令。。 我使用嵌套指令控件。 这允许你设置模板并在其中继承( 或者隔离) 作用域。 除这里之外,我使用ng-switch或者仅仅是ng-show来选择我正在显示哪些控件来显示来自 $routeParams.的内容

这里的编辑是一些示例 pseudo-code,让你了解我在谈论什么。 使用嵌套的子导航。

这是主要的应用程序页面


<!-- primary nav -->
<a href="#/page/1">Page 1</a>
<a href="#/page/2">Page 2</a>
<a href="#/page/3">Page 3</a>

<!-- display the view -->
<div ng-view>
</div>

子导航的指令


app.directive('mySubNav', function(){
 return {
 restrict: 'E',
 scope: {
 current: '=current'
 },
 templateUrl: 'mySubNav.html',
 controller: function($scope) {
 }
 };
});

子导航模板


<a href="#/page/1/sub/1">Sub Item 1</a>
<a href="#/page/1/sub/2">Sub Item 2</a>
<a href="#/page/1/sub/3">Sub Item 3</a>

主页的模板( 从主导航)


<my-sub-nav current="sub"></my-sub-nav>

<ng-switch on="sub">
 <div ng-switch-when="1">
 <my-sub-area1></my-sub-area>
 </div>
 <div ng-switch-when="2">
 <my-sub-area2></my-sub-area>
 </div>
 <div ng-switch-when="3">
 <my-sub-area3></my-sub-area>
 </div>
</ng-switch>

主页面的控制器。 ( 从主导航)


app.controller('page1Ctrl', function($scope, $routeParams) {
 $scope.sub = $routeParams.sub;
});

子区域指令


app.directive('mySubArea1', function(){
 return {
 restrict: 'E',
 templateUrl: 'mySubArea1.html',
 controller: function($scope) {
//controller for your sub area.
 }
 };
});

更新: 签出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放在每个部分的top-most级别

你也可以为同样的目的签出此库:

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'}).

Top-level 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 ) 和视图视图有 3个子视图。

...