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

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

有几种方法可供您使用.

最好的办法是添加自己的指令.扩展您的示例:

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

如果您只是重复使用相同的部分来避免重复代码,那么只需用单引号括起URL:

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