复杂的部分和模板嵌套

我的问题涉及如何在AngularJS应用程序中处理复杂的模板嵌套（也称为partials ）。

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

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

该应用程序是单页面的，所以它加载了一个index.html ，它在DOM中包含一个div元素，并带有ng-view属性。

对于圆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应用程序来处理模板的这种复杂嵌套，同时保持它们彼此独立？

---

那么，因为你目前只能有一个ngView指令...我使用嵌套的指令控件。 这允许您设置模板并在其中继承（或隔离）范围。 除此之外，我使用ng-switch或者甚至是ng-show来根据从$ routeParams进来的内容来选择显示哪些控件。

编辑这里有一些示例伪代码，让你知道我在说什么。 使用嵌套的子导航。

这是主要的应用程序页面

<!-- 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控制器放在每个部分的最顶层

---

您也可以为同样的目的检出这个库：

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>

链接地址: http://www.djcxy.com/p/47913.html

上一篇: Complex nesting of partials and templates

下一篇: include's on the same page: how to send different variables to each?