在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在我的下一个传递链接。