javascript 页面的一部分作为 Angular 中的子视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19569581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Parts of page as subviews in Angular
提问by dragonfly
I have the following problem to solve:
我有以下问题需要解决：
From within local menu (menu on the left) I can choose sub pages. Typical scenario. And now I would like to relaod content associated with local menu item. In pure Angular I don't know a standard easy way to achieve it. I could get markup from the server manually and replace the content area manually. Is there a better way? I googled and came across
从本地菜单（左侧菜单）中，我可以选择子页面。典型场景。现在我想重新加载与本地菜单项相关的内容。在纯 Angular 中，我不知道实现它的标准简单方法。我可以手动从服务器获取标记并手动替换内容区域。有没有更好的办法？我用谷歌搜索发现
Yet before I start delving into details perhaps you could advice how to solve this problem. Or even advice if I can solve this issue with ui-router.
然而，在我开始深入研究细节之前，也许您可以建议如何解决这个问题。或者甚至建议我是否可以用 ui-router 解决这个问题。
采纳答案by NicolasMoise
You want to use nested states in with ui-router. Something like this
您想在 ui-router 中使用嵌套状态。像这样的东西
$stateProvider
.state('home', {
templateUrl: 'views/home.html',
url: '/home',
controller: 'homeCtrl'
})
.state('home.localmenu1', {
templateUrl: 'views/localmenu1.html',
url: '/home/local1',
controller: 'local1Ctrl'
})
.state('home.localmenu2', {
templateUrl: "views/localmenu2.html",
url: '/home/local2',
controller: 'local2Ctrl'
})
.state('products', {
templateUrl: 'views/products.html',
url: '/products',
controller: 'productsCtrl'
})
So inside your "views/home.html" you can put an element with the ui-viewdirective. Then this element will contain the views of the sub-states (home.localmenu1, home.localmenu2).
所以在你的“views/home.html”中，你可以放置一个带有ui-view指令的元素。然后这个元素将包含子状态 ( home.localmenu1, home.localmenu2)的视图。
回答by Vexter
Somewhat similar to kseb's answer, if you prefer to use out-of-the-box Angular, you can use ng-includefor this. By attaching a controller you can change what you want shown there as easily as you can for any other "real" view.
与 kseb 的回答有些相似，如果您更喜欢使用开箱即用的 Angular，则可以为此使用ng-include。通过附加控制器，您可以像更改任何其他“真实”视图一样轻松地更改要在那里显示的内容。
If you create a menu.html file in your /views:
如果您在 /views 中创建 menu.html 文件：
<li ng-repeat="menu in menus">
<a href="{{menu.link}}">{{menu.name}}</a>
</li>
You can include it in your index.html like this:
你可以像这样将它包含在你的 index.html 中：
<body>
<ul ng-include="views/menu.html" ng-controller="MenuCtrl"></ul>
<div class="container" ng-view></div>
</body>
That does the trick and is fully valid, works in all browsers. The controller can be just like any other controller you might use.
这可以解决问题并且完全有效，适用于所有浏览器。控制器可以与您可能使用的任何其他控制器一样。
回答by kseb
For local menus where URL bar is not important I often use ng-includewithout ng-view:
对于 URL 栏不重要的本地菜单，我经常ng-include不使用ng-view：
<script id="view1" type="text/ng-template">
<div ng-controller="View1Ctrl">
Hello view1.
</div>
</script>
<script id="view2" type="text/ng-template">
<div ng-controller="View2Ctrl">
Hello view2.
</div>
</script>
<ul class="menu" ng-init="template='view1'">
<li><button ng-click="template='view1'">view1</button></li>
<li><button ng-click="template='view2'">view2</button></li>
</ul>
<div ng-include src="template"></div>
回答by Chandermani
As long as your ng-view does not require sub view rendering with url route changes, you can use ng-view
只要你的 ng-view 不需要带有 url 路由变化的子视图渲染，你就可以使用 ng-view
Look at this answer AngularJS application multiple pages
看这个答案AngularJS application multiple pages
If this is your html
如果这是你的 html
<body ng-app>
<div id='topNav' ng-include='templateUrl' ng-controller='topNavController'></div>
<div id='left' ng-include='templateUrl' ng-controller='leftNavController'></div>
<div ng-view>
</body>
Your routes can he defined like this
你的路线他可以这样定义
#/home //home `ng-view`
#/products //product list `ng-view`
#/products/1 // product details `ng-view`
#/products/1/feedback //product 1 feedback `ngview`
You ng-view is replace with each route change.
您的 ng-view 被替换为每次路线更改。
回答by Phil Thomas
You can indeed and it's quite easy.
你确实可以，而且很容易。
Check out ui-router's documentation, especially the code examples and plunker in the section about nested states and views.
查看 ui-router 的文档，尤其是关于嵌套状态和视图部分中的代码示例和 plunker 。
