Angularjs:单个 html 中的多个部分? [英] Angularjs: Multiples partials in single 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 中的多个部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
