25

我对 AngularJS 比较陌生，想知道动态拉入部分模板的可行性。考虑这个抽象（并为本示例简化）的模块。这本身就是一个部分模板，将在整个应用程序中重复使用。

部分模块标记

<div class="module">
    <h2 class="module-title">{{module.title}}</h2>

    <div class="module-content">
        {{module.content}}
    </div>

</div>

在客户端获取一些数据后，我可能希望module.content是一个简单的文本字符串，没有问题。如果我可以module.content根据我正在使用的数据动态地将其他部分模板插入其中，这将是有用的。例如，在我的回复中，我有一个我希望显示的标题列表，是否可以引入处理标题的部分模板？在另一个地方，module.content可能是处理图像库的部分模板。

任何输入或方向将不胜感激！

4

1 回答 1

46

有几种方法可供您使用。

您最好的选择是添加您自己的指令。扩展您的示例：

module.directive('myModule', function() {
  return {
    restrict: 'A',
    scope : {
      title : '@'
    },
    templateUrl : '/partial/module.html',
    transclude : true
  };
});

我们将使用嵌入来使内容更加灵活。现在部分：

<div class="module">
  <h2 class="module-title">{{title}}</h2>

  <div class="module-content" ng-transclude></div>
</div>

安装此指令后，您可以使用以下 HTML：

<div my-module title="{{module.title}}">
  {{module.content}}
</div>

另一种选择是使用该ng-include指令。这是对部分的简单嵌入，不同之处在于被嵌入的部分与其包含的上下文处于相同的范围内。

<div ng-include="module.partialUrl"></div>

在上述情况下，Angular 将在 URL 处嵌入部分内容$scope.module.partialUrl。（编辑：这意味着您可以通过替换 ngInclude 使用的范围变量来动态替换 UI。太棒了，对吧？）

如果您只是重用相同的部分以避免重复代码，那么只需将 URL 括在单引号中：

<div ng-include="'/partial/foo.html'"></div>
于 2012-10-04T22:34:49.923 回答