Question

ng-view指令的所有样本都显示必须使用它，如下所示

<div class="header">
    <a href="/view/1"></a>
    <a href="/view/2"></a>
    <a href="/view/3"></a>
</div>
<ng-view></ng-view>

我想一会儿淋浴以及下面的疑问，需要在ng-view加ng-switch和ng-include的帮助下懒散地加载所有内容。一些新东西，没有AMD的解决方案，如requirejs！text plugin和angularjs providers。想法是通过ngView内的链接更改子视图。视图模板将是这样的：

<div>
    <a href="#\item-profile\1">Item Profile</a>
    <a href="#\status\2">status</a>
    <a href="#\status\3">View1</a>
</div>
<div ng-switch="view">
    <div ng-switch-when="item-profile">
        <div ng-include="'item-profile.html'">
    </div>
    <div ng-switch-when="status">
        <div ng-include="'status.html'">
    </div>
</div>
<div ng-switch="subView">
    <div ng-switch-when="1">
        <div ng-include="'sub-view1.html'">
    </div>
    <div ng-switch-when="2">
        <div ng-include="'sub-view2.html'">
    </div>
    <div ng-switch-when="3">
        <div ng-include="'sub-view3.html'">
    </div>
</div>

index.html看起来像：

<body>
    <ng-view></ngview>
</body>

路线配置：

angular.module('app', ['ngRoute']).config([
    '$routeProvider',
    function (rp){
        rp.when('/:view/:subView', {
            template: 'view.html',
            controller: [
                '$scope',
                '$route',
                function (s, r) {
                    s.subView = r.params.subView;
                    s.view = r.params.view;
                }
            ]
        });
    }
]);

但由于某种原因，这不起作用，请按照plunkr

上的代码进行操作

Answer 1

听起来你需要ui-router，特别是its nested/sub-views和named views。

可以使用将在ng-view内部选择路由的链接

1 个答案: