部分和模板的复杂嵌套

小编典典

部分和模板的复杂嵌套

all

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

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

AngularJS 页面图

如您所见，这有可能成为一个相当复杂的应用程序，其中包含许多嵌套模型。

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

对于第 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 应用程序来处理如此复杂的模板嵌套，同时保持它们彼此分离？

阅读 95

2022-03-13

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

子导航指令

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

2022-03-13