AngularJS-单个模板中的多个ng-view

132

我正在使用AngularJS构建动态Web应用程序。ng-view一个模板上可以有多个模板吗？

angularjs ng-view

— 杰拉姆
source

2

似乎有一个请求请求，但仍然存在一些错误：github.com/angular/angular.js/pull/1198

— Alp

4

Jan Varwig讲述了指令在Angular中的作用。这不是一个回答你的问题，但对于一些情况下，他的想法会是个不错的选择：jan.varwig.org/archive/angularjs-views-vs-directives/...

— 尤哈Palomäki

虽经过角教程，并有此相同的问题，他们没有让这个很清楚，似乎是一个非常深刻的概念，但..

— qwwqwwq

100

您只能拥有一个ng-view。

您可以通过几种方式更改其内容：ng-include，ng-switch或通过routeProvider映射不同的控制器和模板。

— 麻黄素
source

1

映射控制器和模板将替换整个ng-view元素，对不对？

— zx1986

9

动态更改小部件的内容该怎么办？您是否不想为小部件创建视图，为小部件创建控制器以及为小部件创建模型？

— Ray Suelzer 2013年

是否建议使用视图？用ng-show和定义div 并ng-hide使用变量控制其可见性不是更好吗？因为有时候我可能想隐藏/显示多个组件

— SomethingSomething

39

UI-Router是一个可以提供帮助的项目：https : //github.com/angular-ui/ui-router 它的功能之一是多命名视图

UI-Router具有许多功能，如果您正在使用高级应用程序，我建议您使用它。

在此处检查“多个命名视图”的文档。

— 莫尔蒂扎·兹耶（Morteza Ziyae）
source

6

不幸的是，正如ui-router自述文件所述：注意：UI-Router正在积极开发中。因此，尽管对该库进行了充分的测试，但API可能会更改。仅当您愿意遵循变更日志并相应地更新用法时，才考虑在生产应用程序中使用它。

— 火车

1

@trainoasis用于多个项目，似乎“非常”稳定，到目前为止，我对更改API没有任何问题，实际上我不记得API的任何重大更改。

— Morteza Ziyae 2015年

19

我相信您只需拥有一个即可完成此任务ng-view。在主模板中，您可以具有ng-include用于子视图的部分，然后在主控制器中，为每个子模板定义模型属性。这样它们将自动绑定到ng-include节。这与拥有多个ng-view

您可以查看文档中给出的示例ng-include

在示例中，当您从下拉列表中更改模板时，它将更改内容。这里假设你有一个主要ng-view主视图，而不是通过选择下拉列表来手动选择子内容，而是在加载主视图时进行操作。

— 泰克斯
source

2

如您所解释的，在没有像UI-Router这样的解决方案的情况下，ng-include确实是一个可行的选择。ng-include无法完成的是URL（状态）驱动的多视图，$ route无法基于当前URL动态呈现不同的视图。我们可以扭曲Angular的手臂，并通过在控制器中使用自定义逻辑来实现它，就像ng-include 文档中的示例一样，但这不是理想的应用程序体系结构模式，UI-Router是正确的解决方案类型。

— 宜陵

@Yiling评论加一。使用ng-include是一种解决方法。

— Farshid Saberi

13

使用常规ng-view模块，您不能有多个动态模板。

但是，此项目使您能够这样做（查找ui-router）。

— ŁukaszBachman
source

3

angular-ui在（不久的将来）似乎是一个不错的选择，但对于生产用途来说似乎仍然非常不稳定

— David Barreto

8

可能有多个或嵌套的视图。但不是通过ng-view。

angular中的主要路由模块不支持多个视图。但是您可以使用ui-router。这是第三方模块，您可以通过Github，angular-ui / ui-router，https：//github.com/angular-ui/ui-router获得。目前，还在开发新版本的ngRouter（ngNewRouter）。目前尚不稳定。因此，我为您提供了一个简单的ui-router启动示例。使用它，您可以命名视图并指定应使用哪些模板和控制器来呈现它们。使用$ stateProvider，您应该指定应如何呈现特定状态的视图占位符。

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

您需要参考此示例的angularjs和angular-ui.router。

$ bower install angular-ui-router

— 法尔希德·萨贝里（Farshid Saberi）
source

谢谢Farshid，太好了！应该在我获得模块的angular-ui / ui-router Github存储库github.com/angular-ui/ui-router中提到

— 完全实现了

我不确定为什么需要这么做。为什么不ng-包括页眉/页脚和ng-view内容？

— 2016年

如果托管文件，则ng-include将起作用，例如。在nodejs上。如果使用本地目录，它将引发跨域错误。

— Sid

0

您不能有多个ng-view。以下是我满足要求的用例。我希望在模型对话框中具有选项卡式的行为。我面临的问题是，单击具有超链接的选项卡将调用路由器链接。我使用按钮和CSS选项卡解决了这个问题。当用户单击选项卡时，它实际上不会调用任何将始终调用ng-router的超链接。当用户单击选项卡时，它将调用一个方法，在那里我会动态加载html。以下是单击选项卡上的功能

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

用户$ templateRequest。在test_template.html页面中添加您的html内容。此html内容将绑定到您的控制器。

— 伊斯兰教
source