45

我有两个不同的角度应用程序。在集成到单个应用程序期间，我必须

嵌套 ng 视图。

对于示例（index.html）是

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

我的应用视图之一是（view2.html）

<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}

现在，此应用程序内部再次具有不同的视图。

我试过了，但页面没有加载。是否有可能嵌套 ng-views？

如果不可能，能否解释

提前致谢

4

6 回答 6

27

Updated answer:

UI Router (which now sits here: https://angular-ui.github.io/ui-router/site/#/api/ui.router) is generally regarded as the best solution for complex routing in AngularJS.

Original answer:

Nesting views isn't natively possible, as of now, in AngularJS. In my last app, I used a solution derived from here: http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Allowing me to effectively nest views (and skipping the limited ng-view altogether)

After doing so, this other (simpler, better, I believe) solution appeared:

http://angular-ui.github.com/ (scroll down to "Route Checking")

Check it out!

于 2013-03-26T12:48:37.993 回答
24

我建议你看看 AngularUI 团队的ui-router项目。该项目包含一个基于状态的新路由器，它也可以对 URL 做出反应，但可以更好地处理应用程序状态。

这包括使用多个和/或嵌套视图。

前段时间我有一个类似的问题，所以也许它的答案也会对你有所帮助：如何在 AngularJS 中设置嵌套视图？

此外，您可以期望 ui-router 在未来版本中集成到 AngularJS 中，因此这很可能是未来路由的工作方式。因此，如果您已经拥有今天的下一个解决方法，则无需坚持其他解决方法 :-)

于 2013-03-26T13:40:14.127 回答
2

看看这个：

看起来像您正在寻找的东西

于 2013-05-20T11:49:15.200 回答
2

有许多用于嵌套视图和路由的第三方库。这里已经提到了ui-router，我也建议看看这个：

http://angular-route-segment.com

它具有您所要求的嵌套视图功能，并且比 ui-router 更易于使用。在您的示例中：

索引.html：

<div app-view-segment="0"></div>

视图1.html：

<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>

deep-view.html：

<p>This is the partial for view inside view1.</p>
于 2013-08-15T10:12:03.487 回答
2

如果您不想求助于另一个库来解决您的问题（并不是说这有什么问题），您还应该考虑使用指令以及 ng-switch 和 ng-show。

这种方法在这里作为答案给出：

部分的角度复杂嵌套

于 2013-09-02T19:31:43.897 回答
0

我真诚地怀疑这是惯用的 Angular（并且上面提到可能存在跨浏览器问题），但是我的ng-include解决方案是让我的其他视图嵌套在类似的东西中的“全部”视图中all.html：

    <div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
    </div>

    <div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
    </div>

    <div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
    </div>

这对我有用，但感觉它违背了框架的纹理。我将亲自尝试类似 Eamon 在下一次传球时链接到的内容。

于 2013-09-02T19:52:55.707 回答