javascript - 动态更改 Angular 指令中的 html 元素

Question

假设有一个像这样的指令的简单模板:

<section class="card {{width}} recipe-list-card">
  <div class="card-top">
    <h3>{{headerText}}</h3>
  </div>
  <div class="card-bottom">
    <div ng-transclude></div>
  </div>
</section>

在某些情况下，我想使用 h2，而在其他情况下，我想使用 h3。有什么好的方法可以通过指令改变元素吗？

这是我的指令中的内容:

module.exports = function(app) {

      app.directive('cardDirective', function() {
        return {
          restrict: 'AC',
          replace: true,
          transclude: true,
          templateUrl: '/templates/card_template.html',
          scope: {
            header: '=',
            headerText: '@',
            width: '@' //two columns, three columns, etc
          }
        }
      })
    }

我想将 header 变量分配给 h2、h3 等。到目前为止，我只能获得转义的 html(实际标签在浏览器中呈现为 <h2>)。

Answer 1

您可以为您的标题标签创建指令，如下所示:

angular.module('myApp')
    .directive('myHeading', myHeading);

function myHeading() {
    return {
        transclude: true,
        template: function(tElement, tAttrs) {
            var level = Number(tAttrs.level);
            if (level < 1 || level > 6) level = 1; // default
            return '<h' + level + '><ng-transclude></ng-transclude></h' + level + '>';
        }
    };
}

然后你可以像这样在你的模板中使用它:

<my-heading level="2">{{headerText}}</my-heading>