我可以并排渲染ui-router嵌套视图吗？

Question

我使用ui-router在角度应用中导航。我在这样的层次结构中使用嵌套状态/视图。

<!-- index.html -->
<h1>Page Title</h1>
<ui-view></ui-view>

<!-- Page1.template.html -->
<h1>Title 1</h1>
<ui-view></ui-view>

<!-- Page2.template.html -->
<h1>Title 2</h1>
<ui-view></ui-view>

<!-- Page3.template.html -->
<h1>Title 3</h1>
<ui-view></ui-view>

这个结果如预期的那样：

是否可以使页面看起来像这样，即并排呈现子视图：

Answer 1

是的，有可能。看看文档 - Rizier123's。基本上你会有你的页面：

$stateProvider
.state('main',{
    views: {
        'child1': {
            templateUrl: 'child1.html',
            controller: 'Child1Ctrl'
        },
        'child1': {
             templateUrl: 'child2.html',
             controller: 'Child2Ctrl'
        },
        'child3': {
            templateUrl: 'child3.html',
            controller: 'Child3Ctrl'
        }
    }
});

和状态配置

$scope

每个子视图都可以拥有自己的配置，与原始状态配置相同。

更新

如果您希望它们是动态的，即指定您想要手动渲染的视图，那么您可以使用此方法在某些ng-repeat变量中指定名称，并在.controller('SomeCtrl', function ($scope) { $scope.views = ['child1', 'child3']; }) 上指定名称：

<div ng-repeat="view in views">

    <div ui-view="{{view}}"></div>

</div>

HTML：

@Html.TextBoxFor(m => m.Foo)
@Html.ValidationMessageFor(m => m.Foo)

请在此处查看示例：Multiple Named Views