133

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

4

6 回答 6

100

你可以只有一个ng-view。

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

于 2013-07-09T09:28:19.120 回答
39

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

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

在此处查看多个命名视图的文档。

于 2013-09-04T13:25:55.073 回答
19

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

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

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

于 2014-10-21T05:53:38.323 回答
13

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

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

于 2013-07-09T10:17:54.647 回答
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
于 2015-10-09T12:19:52.650 回答
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 内容将绑定到您的控制器。

于 2018-08-18T06:15:58.503 回答