页面的一部分作为Angular中的子视图
dra*_*fly 21 javascript angularjs angular-ui-router
我有以下问题需要解决:
从本地菜单(左侧菜单)中我可以选择子页面.典型情况.现在我想重新下载与本地菜单项相关的内容.在纯Angular中,我不知道实现它的标准简单方法.我可以手动从服务器获取标记并手动替换内容区域.有没有更好的办法？我用Google搜索并遇到了
然而,在我开始深入研究细节之前,您可以建议如何解决这个问题.或者甚至建议我是否可以用ui-router解决这个问题.
Nic*_*ise 17
您想在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'
})
因此,在"views/home.html"中,您可以使用该ui-view指令放置一个元素.然后,此元素将包含子状态(home.localmenu1,home.localmenu2)的视图.
有点类似于kseb的答案,如果您更喜欢使用开箱即用的Angular,可以使用ng-include.通过连接控制器,您可以轻松地在任何其他"真实"视图中更改您想要显示的内容.
如果您在/ views中创建menu.html文件:
<li ng-repeat="menu in menus">
<a href="{{menu.link}}">{{menu.name}}</a>
</li>
您可以将它包含在index.html中,如下所示:
<body>
<ul ng-include="views/menu.html" ng-controller="MenuCtrl"></ul>
<div class="container" ng-view></div>
</body>
这样做可以完全有效,适用于所有浏览器.控制器可以像您可能使用的任何其他控制器一样.
对于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>
| 归档时间： |
|
| 查看次数： |
15211 次 |
| 最近记录： |