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

我正在使用 AngularJS 建立一个动态的网络应用程序。是否有可能在一个模板上有多个 ng-view？

148260 次浏览
小开
最佳答案

你可以只有一个 ng-view。

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

小开

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

但是，这个项目允许您这样做(查找 ui-router)。

小开

UI-Router 是一个可以提供帮助的项目: < a href = “ https://github.com/angle-ui/UI-Router”rel = “ norefrer”> https://github.com/angular-ui/UI-Router 它的一个特性是 < strong > 多个命名视图

路由器有许多功能，我建议你使用它，如果你正在工作的一个高级应用程序。

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

小开

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

您可以检查 ng-include 文件中给出的示例

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

小开

可以有多个视图或嵌套视图，但不能使用 n- 视图。

主路由模块的角度不支持多视图。 但是你可以使用 ui 路由器。这是一个第三方模块，您可以通过 Github、 angle-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 和 angle-ui. router。

$ bower install angular-ui-router
小开

你不能有多个 n- 视图。下面是我的用例，我解决了我的需求。 我希望在模型对话框中有选项卡式行为。我面临的问题，因为点击标签有超链接，将调用路由器链接。我用按钮和 css 解决了这个问题。当用户点击选项卡，它实际上将不会调用任何超链接，将总是调用 ng- 路由器。当用户点击 tab 时，它将调用一个方法，我在这里动态加载 html。下面是点击选项卡的功能

self.submit = function(form) {
$templateRequest('resources/items/employee/test_template.html').then(function(template){
var compiledeHTML = $compile(template)($scope);
$("#d").replaceWith(compiledeHTML);
});

User $templateRequest. 在 test _ template.html 页面中添加 html 内容。


提交答案