使用angularjs加载多个视图

Question

我有这样的场景：

<a href="#">Link1</a>
<a href="#">Link2</a>

<div id="child1"></div>
<div id="child2"></div>

• 当我点击link1时，我希望在div child2中加载查看A ，在div child2中加载查看B 。
• 当我点击link2时，我希望在div child 1中加载查看C ，在div child2中加载查看D

我在我的应用中使用ngRoute（标准AngularJS路由器）。

即：我希望不同的链接有不同的视图集。如何使用AngularJS实现这一目标。我知道Angular确实提供了路由，但我在网上看到的任何例子都只适用于单一视图。

我保持这种情况非常简单。实际上它要复杂得多，所以我无法将每个链接的2个视图合并为1个。

Answer 1

这是一个建议：

1）制作4个模板（每个视图一个）：

• viewA.html
• viewB.html
• viewC.html
• viewD.html

2）在您的应用上设置2条路线（每条链接一条）：

$routeProvider.when('/page1', {
    templateUrl: 'page1.html',
    controller: 'Page1Ctrl'
}).when('/page2', {
    templateUrl: 'page2.html',
    controller: 'Page2Ctrl'
});

3）在页面link1.html和link2.html

中包含视图

<!-- page1.html -->
<div id="child1" ng-include="'viewA.html'"></div>
<div id="child2" ng-include="'viewB.html'"></div>

<!-- page2.html -->
<div id="child1" ng-include="'viewC.html'"></div>
<div id="child2" ng-include="'viewD.html'"></div>

3）设置<a>标记

<a href="#/page1">Link1</a>
<a href="#/page2">Link2</a>

Answer 2

另一个建议是，您可以使用ui-router和multiple named views，它易于使用且非常强大。

您可以使用ui-view这样的

创建不同的视图容器

<a href="#" >Link1</a>

<a href="#" >Link2</a>

<div ui-view="child1"></div>
<div ui-view="child2"></div>

在您app.config中，您可以为每个状态设置要为不同视图加载的模板：

.state('report', {      
    views: {        
      'child1': { ... templates and/or controllers ... },       
      'child2': {}      
    }