我正在使用 AngularJS 构建一个动态 Web 应用程序。一个模板上可以有多个ng-view吗？
【问题讨论】：
您只能拥有一个ng-view。
您可以通过多种方式更改其内容：ng-include、ng-switch 或通过 routeProvider 映射不同的控制器和模板。
【讨论】：
ng-show 和ng-hide 定义div 并使用变量控制它们的可见性不是更好吗？因为有时我可能想隐藏/显示多个组件
使用常规的ng-view 模块，您不能拥有多个动态模板。
但是，this project 允许您这样做（查找 ui-router）。
【讨论】：
UI-Router 是一个可以提供帮助的项目：https://github.com/angular-ui/ui-router 它的功能之一是多个命名视图
UI-Router 有很多功能，如果您正在开发高级应用程序，我建议您使用它。
查看多个命名视图 here 的文档。
【讨论】：
我相信您只需拥有一个ng-view 就可以完成它。在主模板中，您可以有子视图的ng-include 部分，然后在主控制器中为每个子模板定义模型属性。这样它们就会自动绑定到ng-include 部分。这与拥有多个ng-view 相同
您可以查看ng-includedocumentation中给出的示例
在示例中，当您从下拉列表更改模板时，它会更改内容。这里假设您有一个主ng-view，而不是通过选择下拉菜单手动选择子内容，而是在加载主视图时执行此操作。
【讨论】：
ng-include documentation 中的示例，但它不是理想的应用程序架构模式，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
【讨论】：
你不能有多个 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 内容将绑定到您的控制器。
【讨论】：