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

问题描述

我的问题涉及到如何去处理复杂的嵌套的模板（又称谐音）在AngularJS应用程序。

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.

该应用程序是单页，所以它加载一个的index.html 包含与DOM的div元素的 NG-视图属性。

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

对于圈1 后，您会看到有加载适当的模板到 NG-视图的主导航。我通过传递 $ routeParams 来的主要应用模块，这样做。下面是什么在我的应用程序的例子：

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

    }]);

在圈2 ，即加载到 NG-视图模板有一个额外的子导航 。那么这个子导航需要的模板加载到它下面的区域 - 但由于已被使用NG-看法，我不知道如何去这样做。

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.

我知道我可以包括第一模板中的其他模板，但这些模板都将是pretty复杂。我想保留所有的模板，以便分开，使应用程序更易于更新，而不是对有才能访问它的孩子要加载的父模板的依赖关系。

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.

在圈3 上，您可以看到事情变得更加复杂。还有的是，子导航模板将有第二次导航将需要并加载自己的模板，进入该地区中的圈电位4

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

如何去关于构建一个AngularJS应用程序来处理的模板，例如复杂的嵌套，同时保持它们都彼此分开？

推荐答案

好吧，既然你目前只能有一个ngView指令...我使用嵌套的指令控制。这允许您设置的模板和继承（或分离），其中作用域。那外面我使用纳克开关，甚至只是NG-节目选择控制我基于什么从$ routeParams进来的显示。

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.

修改下面是一些例子伪code给你什么，我谈论的想法。随着嵌套子导航。

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>

指令为子导航

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>

模板的主网页（从小学NAV）

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

指令的子区

app.directive('mySubArea1', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});

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