Question

我有以下问题需要解决：

enter image description here

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

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

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

Answer 1

您希望在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）。

Answer 2

与kseb的答案有些相似，如果您更喜欢使用开箱即用的Angular，可以使用ng-include。通过连接控制器，您可以尽可能轻松地更改您想要显示的内容，以及其他任何＆＃34;真实＆＃34;图。

如果您在/ 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>

这就是技巧并且完全有效，适用于所有浏览器。控制器可以像您可能使用的任何其他控制器一样。

Answer 3

对于网址栏不重要的本地菜单，我经常使用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>

Answer 4

你确实可以，这很容易。

查看ui-router的文档，尤其是section about nested states and views中的代码示例和plunker。

Answer 5

只要您的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`

您的视图将替换为每次路线更改。

页面的一部分作为Angular中的子视图

5 个答案: