Fatal编程技术网
  • css/
  • Css 我可以并排呈现ui路由器嵌套视图吗？

Css 我可以并排呈现ui路由器嵌套视图吗？

css angularjs

Css 我可以并排呈现ui路由器嵌套视图吗？,css,angularjs,angular-ui-router,Css,Angularjs,Angular Ui Router,我正在使用ui路由器在angular应用程序中进行导航。我在这样的层次结构中使用嵌套状态/视图 <!-- index.html --> <h1>Page Title</h1> <ui-view></ui-view> <!-- Page1.template.html --> <h1>Title 1</h1> <ui-view></ui-view> <!-- Page2.

我正在使用ui路由器在angular应用程序中进行导航。我在这样的层次结构中使用嵌套状态/视图

<!-- 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>


页面标题
标题1
标题2
标题3
这将产生如下预期结果：

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

是的，这是可能的。看一下文档-。基本上，您的页面如下所示：

<body>
    <div ui-view="child1"></div>
    <div ui-view="child2"></div>
    <div ui-view="child3"></div>
</body>
每个子视图都可以有自己的配置，与原始状态配置相同

更新：

如果您希望它们是动态的，即指定要手动渲染的视图，使用此方法，您可以在一些
$scope
变量中指定名称，并在其上重复
ng
：

.controller('SomeCtrl', function ($scope) {

    $scope.views = ['child1', 'child3'];

})
HTML:
请参见此处的示例：

是的，这是可能的。看一下文档-。基本上，您的页面如下所示：

<body>
    <div ui-view="child1"></div>
    <div ui-view="child2"></div>
    <div ui-view="child3"></div>
</body>
每个子视图都可以有自己的配置，与原始状态配置相同

更新：

如果您希望它们是动态的，即指定要手动渲染的视图，使用此方法，您可以在一些
$scope
变量中指定名称，并在其上重复
ng
：

.controller('SomeCtrl', function ($scope) {

    $scope.views = ['child1', 'child3'];

})
HTML:
请参见此处的示例：

我可以使其更具动态性吗？我不想有固定数量的子视图。我可以让它更具动态性吗？我不希望有固定数量的子视图。