31

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

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。

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

谢谢！

2012 年 4 月 7 日更新：

我试图一次更新多个 div，并使用独特的 html 检索。我不喜欢这样：

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

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

谢谢！

4

2 回答 2

50

模板可以嵌入到主 html 中。例如，使用以下内容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 服务的文档有更多详细信息。

于 2012-07-04T16:53:35.893 回答
5

我所做的是使用模板而不是 templateUrl，并使用 requirejs 文本插件来加载模板。以这种方式进行开发，您的模板可以拥有数千个文件，但是一旦缩小，您就只有一个内联所有模板的 javascript 文件。

我创建了一个开源项目，它是为骨干设置的，但可以很容易地修改为 angular，它会为您进行缩小和 requirejs 文本插件接线：http: //github.com/davidjnelson/agilejs

于 2013-03-04T23:57:08.850 回答