21

我有以下问题要解决：

在此处输入图像描述

从本地菜单（左侧菜单）中，我可以选择子页面。典型场景。现在我想重新加载与本地菜单项相关的内容。在纯 Angular 中，我不知道实现它的标准简单方法。我可以手动从服务器获取标记并手动替换内容区域。有没有更好的办法？我用谷歌搜索并遇到了

https://github.com/angular-ui/ui-router

然而，在我开始深入研究细节之前，也许您可​​以建议如何解决这个问题。甚至建议我是否可以使用 ui-router 解决此问题。

4

5 回答 5

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)。

于 2013-10-24T15:53:09.710 回答
9

有点类似于 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>

这可以解决问题并且完全有效，适用于所有浏览器。该控制器可以与您可能使用的任何其他控制器一样。

于 2014-04-03T10:05:29.953 回答
5

对于 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>
于 2013-10-24T16:28:24.180 回答
2

只要您的 ng-view 不需要带有 url 路由更改的子视图渲染，您就可以使用 ng-view

看这个答案AngularJS application multiple pages

如果这是你的 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>

他可以这样定义您的路线

#/home   //home `ng-view`
#/products   //product list `ng-view`
#/products/1  // product details `ng-view`
#/products/1/feedback   //product 1 feedback `ngview`

您的 ng-view 将替换为每个路线更改。

于 2013-10-24T15:47:23.810 回答
1

你确实可以，而且很容易。

查看 ui-router 的文档，尤其是关于嵌套状态和视图部分的代码示例和 plunker 。

于 2013-10-24T15:31:06.647 回答