AngularJS ：通过配置对象获取模板并多次显示该模板的指令

Question

我想创建一个自定义指令，它将一个模板作为配置对象的属性，并显示该模板给定的次数，并用页眉和页脚包围。创建此类指令的最佳方法是什么？

该指令将接收配置对象作为范围选项：

var app = angular.module('app');
app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      config: '=?'
    }
    ...
  }
}

此对象（称为配置）使用双向绑定选择性地传递给指令，如上面的代码所示。配置对象可以包括一个模板和一个数字，指示指令应显示模板的次数。例如，考虑以下配置对象：

var config = {
  times: 3,
  template: '<div>my template</div>'
};

当传递给指令时，它会导致指令显示模板五次（使用 ng-repeat。）指令还在模板上方和下方显示页眉和页脚：

<div>the header</div>
<div>my template</div>
<div>my template</div>
<div>my template</div>
<div>the footer</div>

实施此指令的最佳方法是什么？注意：当您回复时，请提供代码游乐场（例如 Plunker）中的工作示例，因为我运行对我探索过的每个可能的实现都存在问题。

更新，我探索过的解决方案包括：

使用指令的 link 函数附加头部、带有 ng-repeat 的模板和页脚。由于某些未知原因，这会遇到模板不重复的问题，整个解决方案似乎都是 hack。
将模板从配置对象插入到指令本身模板的中间。这被证明是困难的，因为 jqLite 似乎已经从其基于 jQuery 的 API 中删除了 CSS 选择器的所有概念，这让我想知道这个解决方案是否是 "the Angular way."
使用编译功能构建出模板。这对我来说似乎是正确的，但我不知道它是否有效。

Answer 1

您确实可以使用 ng-repeat 但在您的指令模板中而不是在 link 中手动使用（因为不会被编译，因此不会重复）。

您没有回答的一个问题是，这个重复的模板应该由 Angular 编译和 link 编辑，还是仅 HTML 是静态的？

.directive('myDirective', function () {
    return {
      restrict: 'E',
      scope: {
        config: '=?'
      },
      templateUrl: 'myTemplate',
      link: function(scope) {
        scope.array = new Array(config.times);
      }
    }
  }

myTemplate 为：

<header>...</header>
<div ng-repeat="item in array" ng-bind-html="config.template"></div>
<footer>...</footer>

Answer 2

我想在这种情况下使用 ng-transclude，因为页眉和页脚包装器将由指令提供，内部内容应根据条件更改。

标记

<my-directive>
  <div ng-repeat="item in ['1','2','3']" ng-bind-html="config.template| trustedhtml"><div>
</my-directive>

指令

var app = angular.module('app');
app.directive('myDirective', function($sce) {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div>the header</div>'+
                 '<ng-transclude></ng-transclude>'+
              '<div>the footer</div>',
    scope: {
      config: '=?'
    }
    .....
  }
}

过滤器

app.filter('trustedhtml', function($sce){
   return function(val){
      return $sce.trustedHtml(val);
   }
})

AngularJS ：通过配置对象获取模板并多次显示该模板的指令

AngularJS : directives which take a template through a configuration object, and show that template multiple times

angularjs

angularjs-directive

angularjs-ng-repeat

angularjs-compile