2

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

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

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

该对象（称为 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 等代码游乐场中提供一个工作示例，因为我在探索的每个可能的实现中都遇到了问题。

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

  1. 使用指令的链接函数来附加头部、带有 ng-repeat 的模板和页脚。由于某种未知原因，这会导致模板不重复的问题，并且整个解决方案似乎是一个 hack。
  2. 将模板从配置对象插入到指令本身的模板中间。事实证明这很困难，因为 jqLit​​e 似乎已经从其基于 jQuery 的 API 中删除了所有 CSS 选择器的概念，这让我怀疑这个解决方案是否是“Angular 方式”。
  3. 使用 compile 函数来构建模板。这对我来说似乎是正确的，但我不知道它是否会起作用。
4

2 回答 2

0

You could indeed use ng-repeat but within your directive template rather than manually in the link (as that wouldn't be compiled, hence not repeated).

One question you didn't answer is, should this repeated template be compiled and linked by Angular, or is it going to be static HTML only?

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

With myTemplate being:

<header>...</header>
<div ng-repeat="item in array" ng-bind-html="config.template"></div>
<footer>...</footer>
于 2015-05-01T21:11:16.713 回答
0

我想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);
   }
})
于 2015-05-01T22:07:10.783 回答