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

我正在使用AngularJS构builddynamic的Web应用程序。 是否有可能在一个模板上有多个ng-view

你可以只有一个ng-view

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

UI-Router是一个可以帮助你的项目: https : //github.com/angular-ui/ui-router它的一个特点是多命名视图

UI路由器有许多function,我build议你使用它,如果你在高级应用程序工作。

在这里查看多个命名视图的文档。

我相信你可以通过单一的ng-view来完成。 在主模板中,可以为子视图设置ng-include部分,然后在主控制器中为每个子模板定义模型属性。 所以他们会自动绑定到ng-include部分。 这与多个ng-view是一样的

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

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

使用常规的ng-view模块,你不能有多个dynamic模板。

但是, 这个项目可以让你这样做(寻找ui-router )。

有可能有多个或嵌套的意见。 但不是由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