使用 angularjs 加载多个视图

Question

我有这样一个场景：

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

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

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

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

---

即： 我希望不同的 link 有不同的观点。如何使用 AngularJS 完成此操作。我知道 Angular 确实提供了路由，但是我在网上看到的任何示例都仅针对单个视图。

我让这个场景非常简单。实际上它要复杂得多，所以我无法将每个 link.

的 2 个视图合并为 1 个视图

Answer 1

这里有一个建议：

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

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

2) 在您的应用中设置 2 条路线（每个 link 一条）：

$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': {}      
    }