关于javascript：部分和模板的复杂嵌套


Complex nesting of partials and templates

我的问题涉及如何处理AngularJS应用程序中复杂的模板嵌套(也称为部分)。

描述我的情况的最佳方法是用我创建的图像：

AngularJS Page Diagram

正如您所看到的，这有可能是一个相当复杂的应用程序，有许多嵌套模型。

应用程序是单页的，因此它加载一个index.html，该index.html在具有ng-view属性的DOM中包含一个div元素。

对于圆1，您可以看到有一个主导航，它将适当的模板加载到ng-view中。我通过将$routeParams传递给主应用程序模块来完成这项工作。以下是我的应用程序中的示例：

1
2
3
4
5
6
7
8
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视图已经被使用了，我不知道该怎么做。

我知道我可以在第一个模板中包含其他模板，但是这些模板都会非常复杂。为了使应用程序更容易更新，并且不依赖于必须加载才能访问其子模板的父模板，我希望将所有模板分开。

在圈3中，你可以看到事情变得更加复杂。子导航模板可能会有第二个子导航，需要将其自己的模板以及加载到圆4中的区域中。

如何构建一个AngularJS应用程序来处理如此复杂的模板嵌套，同时保持它们彼此独立？

相关讨论

更新：查看Angularui的新项目以解决此问题

对于子部分，利用NG中的字符串非常简单，包括：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="subNav">
 
<li>
Sub Page 1
</li>

 
<li>
Sub Page 2
</li>

 
<li>
Sub Page 3
</li>


</ul>

<ng-include src="subPage"></ng-include>

或者您可以创建一个对象，以防您在整个地方都有指向子页面的链接：

1
$scope.pages = { page1: 'section1/subpage1.htm', ... };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="subNav">
 
<li>
Sub Page 1
</li>

 
<li>
Sub Page 2
</li>

 
<li>
Sub Page 3
</li>


</ul>

<ng-include src="pages[subPage]"></ng-include>

或者你甚至可以使用EDOCX1[0]

1
2
3
$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ul id="subNav">
 
<li>
Sub Page 1
</li>

 
<li>
Sub Page 2
</li>

 
<li>
Sub Page 3
</li>


</ul>

<ng-include src=" '/home/' + tab + '.html'"></ng-include>

您也可以在每个部分的最顶层放置一个NG控制器。

相关讨论

既然你现在只能有一个ngview指令…我使用嵌套的指令控件。这允许您设置模板并继承(或隔离)其中的作用域。除此之外，我使用ng开关，甚至仅使用ng-show，根据$routeparams的输入选择要显示的控件。

这里编辑一些伪代码示例，让您了解我在说什么。使用嵌套的子导航。

这是主应用程序页面

1
2
3
4
5
6
<!-- primary nav -->
Page 1
Page 2
Page 3

<!-- display the view -->

子导航指令

1
2
3
4
5
6
7
8
9
10
11
app.directive('mySubNav', function(){
    return {
        restrict: 'E',
        scope: {
           current: '=current'
        },
        templateUrl: 'mySubNav.html',
        controller: function($scope) {
        }
    };
});

子导航模板

1
2
3
Sub Item 1
Sub Item 2
Sub Item 3

主页模板(来自主导航)

1
2
3
4
5
6
7
8
9
10
11
12
13
<my-sub-nav current="sub"></my-sub-nav>

<ng-switch on="sub">
 
      <my-sub-area1></my-sub-area>
 
 
      <my-sub-area2></my-sub-area>
 
 
      <my-sub-area3></my-sub-area>
 
</ng-switch>

主页的控制器。(来自主导航)

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

子区域指令

1
2
3
4
5
6
7
8
9
app.directive('mySubArea1', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});
相关讨论

您也可以出于同样的目的签出此库：

网址：http://angular-route-segment.com

它看起来像您正在寻找的，而且比UI路由器更简单。从演示站点：

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>

    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        Section 1
   
</li>

    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        Section 2
   
</li>


</ul>

嵌套HTML：

1
2
<h4>Section 1</h4>
Section 1 contents.
相关讨论

我也在努力处理角度上的嵌套视图。

一旦我掌握了用户界面路由器，我就知道我再也不会回到角度默认的路由功能。

下面是一个使用多层视图嵌套的示例应用程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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个子视图。

相关讨论

可以使用ng include来避免使用嵌套的ng视图。

http://docs.angularjs.org/api/ng/directive/nginclude网站http://plnkr.co/edit/ngdoc:example-example39@snapshot？P=预览

我的索引页使用ng视图。然后在我的子页面上，我需要有嵌套的框架。我用ng include。演示显示下拉列表。我用一个链接替换了我的。在函数中，我将放置$scope.template=$scope.templates[0]；或$scope.template=$scope.templates[1]；

1
2
3
$scope.clickToSomePage= function(){
  $scope.template = $scope.templates[0];
};

AngularUI路由器支持嵌套视图。我还没用过，但看起来很有前途。

http://angular-ui.github.io/ui-router/