AngularJS – 单个模板中的多个ng-view
我正在使用AngularJS构builddynamic的Web应用程序。 是否有可能在一个模板上有多个ng-view ？
你可以只有一个ng-view 。
您可以通过几种方式更改其内容： ng-include ， ng-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
