Question

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

Answer 1

您只能拥有一个ng-view。

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

Answer 2

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

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

检查多个命名视图的文档here。

Answer 3

我相信你可以通过单ng-view来实现它。在主模板中，您可以拥有子视图的ng-include个部分，然后在主控制器中为每个子模板定义模型属性。这样它们就会自动绑定到ng-include个部分。这与多个ng-view

相同

您可以查看ng-include documentation

中给出的示例

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

Answer 4

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

但是，this project可以让您这样做（查找ui-router）。

Answer 5

可以有多个或嵌套的视图。但不是通过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

Answer 6

您不能有多个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内容将绑定到您的控制器。

AngularJS - 单个模板中的多个ng视图

6 个答案: