我的问题涉及如何在AngularJS应用程序中处理复杂的templates(也称为partials)嵌套.

描述我的情况最好的方式是用我创作的一张图片:

AngularJS页面图表

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

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

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

    }]);

In circle 2,加载到ng-view中的模板还有一个sub-navigation.然后,这个副导航需要将模板加载到它下面的区域中——但由于ng view已经被使用,我不确定如何进行此操作.

我知道我可以包括额外的模板在第一个模板,但这些模板都将是相当复杂的.我希望将所有模板分开,以便使应用程序更容易更新,并且不依赖于必须加载父模板才能访问其子模板.

In circle 3,你可以看到事情变得更加复杂.子导航模板有可能将具有2nd sub-navigation,其将需要将其自己的模板也加载到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?

推荐答案

既然你现在只能有一个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.
        }
    };
});

Javascript相关问答推荐

使用异步函数和promise 处理递归的最佳方法?

JavaScript 中的数组未定义

结合 promise.then 和 async 函数的打印序列 JavaScript 测验

Angular - 为上传的图像/视频生成缩略图

从 localStorage 对象变量中删除对象键而不从 localStorage 中删除

在网页上设置搜索功能

如何判断数组是否包含给定元素

以Angular 删除 beforeunload 事件

如何将主 js 文件中的数组用于不同的 js 文件?

迭代对象并替换值

如何对齐左侧、叠加和全高侧导航菜单

第二次调用函数会影响第一次调用的变量

使用数组字符串查找性能可行性

显示 React 中选定过滤器数组的总数

如何解决这个错误“Uncaught TypeError: inputArgs[0].match is not a function”

使用谷歌脚本应用程序获取帖子的“401错误代码”

当我在 rxjs 的管道中遇到错误时如何执行“取消订阅”?

TypeError: obj is not a constructor (js / node 中的错误)

在 Angular 中添加项目时,有没有办法移动到特定索引?

使用 JavaScript/React 过滤 API 响应