[解決済み] 部分テンプレートとテンプレートの複雑なネスト

質問

の複雑なネストをどのように処理するかという質問です。 テンプレート (と呼ばれることもあります。 パーシャル )を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がすでに使用されているため、これを行う方法についてよくわかりません。

1つ目のテンプレートに追加のテンプレートを含めることができるのは知っていますが、これらのテンプレートはすべてかなり複雑なものになりそうです。 アプリケーションの更新を容易にするため、また、子テンプレートにアクセスするために親テンプレートをロードする必要がないように、すべてのテンプレートを分離しておきたいと考えています。

サークル3では となると、事態はさらに複雑になることがおわかりいただけるでしょう。 サブナビゲーションのテンプレートに 第2サブナビゲーション の領域に独自のテンプレートもロードする必要があります。 サークル4

AngularJSアプリでテンプレートの複雑なネストを処理するために、それらをすべて互いに分離したまま、どのように構造化すればよいのでしょうか？

どのように解決する？

さて、現状ではngViewディレクティブは1つしか持てないので...。ディレクティブコントロールを入れ子にして使っています。これによって、テンプレを設定し、その中でスコープを継承（または分離）することができます。それ以外では、ng-switchやng-showを使って、$routeParamsから入ってくるものに基づいて、表示するコントロールを選択しています。

EDIT 以下は、私が言っていることを理解するための擬似コードの例です。ネストされたサブナビゲーション付きです。

以下は、アプリのメインページです。

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