Angularjs:单个 html 中的多个部分?

本文介绍了Angularjs:单个 html 中的多个部分?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以在一个 html 中检索多个 html 部分?我有下一个情况:

Is possible retrieve multiples html partials in one single html? I've the next situation:

Template: {header} {main} {footer}

/index: header:"Welcome" main:"welcome text" footer:""

/help: header:"Help title" main:"faq tips" footer"Back to home"

使用 ng-include 我必须从服务器检索 6 个 html.如果我将在一个 html 中检索多个部分，那么我将仅从服务器检索 2 个 html，一个用于/index，另一个用于/help.

using ng-include I've to retreive 6 html from server. If I will retrive multiples partials in one html then I will retrieve 2 html from server only, one for /index and one for /help.

这种情况是真实情况的一个小例子.
类型为 ng-template 的标签 script 对我不起作用，因为脚本必须包含在 ng-include 之前.

This situation is a small example the real situation.
The tag script with type ng-template don't work for me, because the script must be include before of ng-include.

谢谢！

2012 年 4 月 7 日更新:

我寻求一次更新多个 div，并使用唯一的 html 检索.我不喜欢这样:

I seek to update more than one div at a time, with an unique html retreive. I don't like this:

function IndexCtrl($scope) {
    $scope.mainPage = 'partials/index/index.html';
    $scope.headerTemplate = 'partials/index/header.html';
    $scope.footerTemplate = 'partials/index/footer.html';
}

在模板中使用 ng-includes 后包含这些部分.我认为这不是正确的方法.还有其他方法吗?

After in the template use ng-includes for include these partials. I think that this is not the correct way. There is other way?

谢谢！

推荐答案

模板可以嵌入到主 html 中.例如，使用以下 index.html:

Templates can be embedded in the main html. For example, with the following index.html:

<!DOCTYPE html>
<html ng-app=app>
<meta charset=utf-8>
<title>App</title>
<ng-view>Loading...</ng-view>
<script type=text/ng-template id=partial1.html>
 <p>foo = {{foo}}</p>
</script>
<script type=text/ng-template id=partial2.html>
 <p>Contents of partial2.html</p>
</script>
<script src=app.js></script>

您可以使用以下app.js:

angular.module('app', [], ['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {

  $routeProvider.when('/p1', { templateUrl: 'partial1.html', controller: 'Partial1' });

  $controllerProvider.register('Partial1', ['$scope', function($scope) {
    $scope.foo = 'bar';
  }]);
}]);

$templateCache 服务的文档有更多详细信息.

这篇关于Angularjs:单个 html 中的多个部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！