部分和模板的复杂嵌套 [英] Complex nesting of partials and templates

问题描述

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

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

如您所见，这有可能成为一个具有大量嵌套模型的相当复杂的应用程序.

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

对于圆 1，您会看到有一个主导航，可将适当的模板加载到 ng-view 中.我通过将 $routeParams 传递给主应用程序模块来做到这一点.这是我的应用程序中的示例:

angular.module('myApp', []).配置(['$routeProvider'，函数($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 的内容来选择我要显示的控件.

编辑 下面是一些示例伪代码，让您了解我在说什么.带有嵌套子导航.

这是主应用页面

<a href="#/page/1">第 1 页</a><a href="#/page/2">第 2 页</a><a href="#/page/3">第 3 页</a><!-- 显示视图--><div ng-view>

子导航指令

app.directive('mySubNav', function(){返回 {限制:'E'，范围: {当前:'=当前'},templateUrl: 'mySubNav.html',控制器:功能($范围){}};});

子导航模板

Sub Item 1<a href="#/page/1/sub/2">子项目 2</a><a href="#/page/1/sub/3">子项目 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 ng-switch-when="2"><my-sub-area2></my-sub-area>

<div ng-switch-when="3"><my-sub-area3></my-sub-area>

</ng-switch>

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

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

子区域指令

app.directive('mySubArea1', function(){返回 {限制:'E'，templateUrl: 'mySubArea1.html',控制器:功能($范围){//您的子区域的控制器.}};});

My question involves how to go about dealing with complex nesting of templates (also called partials) in an AngularJS application.

The best way to describe my situation is with an image I created:

As you can see this has the potential to be a fairly complex application with lots of nested models.

The application is single-page, so it loads an index.html that contains a div element in the DOM with the ng-view attribute.

For circle 1, You see that there is a Primary navigation that loads the appropriate templates into the ng-view. I'm doing this by passing $routeParams to the main app module. Here is an example of what's in my app:

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

    }]);

In circle 2, the template that is loaded into the ng-view has an additional sub-navigation. This sub-nav then needs to load templates into the area below it - but since ng-view is already being used, I'm not sure how to go about doing this.

I know that I can include additional templates within the 1st template, but these templates are all going to be pretty complex. I would like to keep all the templates separate in order to make the application easier to update and not have a dependency on the parent template having to be loaded in order to access its children.

In circle 3, you can see things get even more complex. There is the potential that the sub-navigation templates will have a 2nd sub-navigation that will need to load its own templates as well into the area in circle 4

How does one go about structuring an AngularJS app to deal with such complex nesting of templates while keeping them all separate from one another?

解决方案

Well, since you can currently only have one ngView directive... I use nested directive controls. This allows you to set up templating and inherit (or isolate) scopes among them. Outside of that I use ng-switch or even just ng-show to choose which controls I'm displaying based on what's coming in from $routeParams.

EDIT Here's some example pseudo-code to give you an idea of what I'm talking about. With a nested sub navigation.

Here's the main app page

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

这篇关于部分和模板的复杂嵌套的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！