Question

我对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可以是处理图像库的部分模板。

非常感谢任何输入或指示！

Answer 1

您可以使用几种方法。

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

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

我们会使用transclusion来使内容更灵活。现在部分：

<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将在$scope.module.partialUrl处的URL处转义部分。（编辑：这意味着您可以通过替换ngInclude使用的范围变量来动态替换UI。真棒，对吧？）

如果您只是重复使用相同的部分来避免重复代码，那么只需用单引号括起网址：

<div ng-include="'/partial/foo.html'"></div>

AngularJS - 在其他部分中动态使用部分

1 个答案: