AngularJS指令，用于将自己的标记名称设置为已定义的字符串

Question

我希望有一个像<h1>这样的标签，我可以将该级别作为属性传递（对于嵌套模板传递深度）。

这可能看起来像：

.directive('hx', function() {
  return {
    restrict: 'E',  transclude: true, replace: true,
    link: function(scope, element, attrs) {
        this.template = '<h' + attrs.level + ' ng-transclude></h' + scope.level + '>'
    }
  }
})

这种方法无效，正如您在http://plnkr.co/edit/tt1oJySS4j0FmamEYBEr?p=preview

所看到的那样

Answer 1

您可以在指令上设置模板。每次链接功能运行时，您都在更改模板。代码中的第一个<hx>元素没有模板，因此不显示任何内容。第二个将使用第一个模板（h1），第三个将使用第二个模板（h1再次）。

相反，您希望将transclude函数用于指令：

link: function(scope, element, attrs, ctrl, transclude) {
  transclude(scope, function (clone) {
    const header = angular.element('<h' + attrs.level + '></h' + attrs.level + '>');
    header.append(clone);
    element.append(header);
    // element.replaceWith(header); // variant replace=true
  });
}

这使您可以访问clone中的已转换内容。然后，我们使用适当的级别创建新的header元素，将内容（在clone中）附加到该元素，然后将该header元素追加到hx。

http://plnkr.co/edit/ED7NU8NmZ1g3G8efQNlu?p=preview