在angular度js嵌套ng视图

我有两个angular度不同的应用程序。 在整合到一个单一的应用程序,我不得不

嵌套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视图?

如果不可能,可以解释

提前致谢

更新回答:

UI路由器(现在位于https://angular-ui.github.io/ui-router/site/#/api/ui.router )通常被认为是AngularJS中复杂路由的最佳解决scheme。


原始答案:

到目前为止,在AngularJS中,嵌套视图在本质上是不可能的。 在我的最后一个应用程序中,我使用了从这里得到的解决scheme: http : //www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

允许我有效地嵌套视图(并且完全跳过有限的ng-view)

这样做后,其他(更简单,更好,我相信)的解决scheme出现了:

http://angular-ui.github.com/ (向下滚动到“路由检查”)

一探究竟!

我build议你看看AngularUI团队的ui-router项目。 这个项目包含一个基于状态的新路由器,它也可以对URL做出反应,但是允许更好的处理应用状态。

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

我刚才也有类似的问题,所以也许它的答案也会帮助你: 如何在AngularJS中设置嵌套视图?

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

有许多第三方库嵌套的意见和路由。 这里已经提到了ui-router ,我也build议看看这个:

http://angular-route-segment.com

它具有你所要求的嵌套视图function,比使用ui-router更简单。 在你的例子中:

index.html

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

view1.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> 

如果你不想再去另外一个库来解决你的问题(不是说有什么问题),你也应该看看使用指令和ng-switch和ng-show。

这个方法在这里给出了答案:

angular度复杂的部分嵌套

我真诚地怀疑这是惯用的Angular(上面提到可能存在跨浏览器的问题),但是我的ng-include解决scheme使得我的其他视图有一个“全部”视图嵌套在一个像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在我的下一个传递链接。