零件和模板的复杂嵌套

Question

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

如您所见，这有可能成为具有许多嵌套模型的相当复杂的应用程序。

该应用程序是单页的，因此它将加载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具有附加的子导航。然后，该子导航需要将模板加载到其下方的区域中-但由于已使用ng-view，因此我不确定如何执行此操作。

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

在第3圈中，您会看到事情变得更加复杂。还有就是该副导航模板将有一个潜在的第二次航行，将需要以及加载自己的模板，进入该地区的圈4

如何构造一个AngularJS应用程序以处理模板的这种复杂嵌套，同时又将它们彼此分开？

Answer 1

好吧，由于您目前只能有一个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>

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

<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>

template for a main page (from primary nav)

<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>

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