問題

我的問題涉及如何在AngularJS應用程式中處理複雜的模板巢狀(也稱為partials).

描述我的情況的最佳方法是我建立的影象:

AngularJS Page Diagram

正如您所看到的,這有可能成為一個相當複雜的應用程式,其中有許多巢狀模型。

應用程式是single-page,因此它載入了一個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中,您可以看到事情變得更加複雜.有可能亞導航模板有第二個子導航,需要載入自己的模板以及圓4中的區域

如何構建AngularJS應用程式以處理如此複雜的模板巢狀,同時保持它們彼此分離?

  最佳答案

嗯,由於目前只能有一個ngView指令...我使用巢狀指令控制元件.這允許您在其中設定模板並繼承(或隔離)範圍.在此之外,我使用ng-switch甚至ng-show來選擇我根據$routeParams中的內容顯示的控制元件.

編輯這是一些示例fig-code,讓你瞭解我正在談論的內容.使用巢狀子導航.

這是主應用頁面

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

  相同標籤的其他問題

javascriptangularjs