好吧,由于您目前只能有一个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>
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. } };});


