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

假设有一个简单的指令模板，如下所示：

<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>

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>

---

我想将头变量分配给h2、h3等。到目前为止，我只能得到转义html（浏览器中呈现的实际标记类似于

。

您可以按照以下代码进行操作

更改HTML如下：

<section class="card {{width}} recipe-list-card">
  <div class="card-top">
    <h3 ng-show="h3">{{headerText}}</h3>
    <h2 ng-show="h2">{{headerText}}</h2>
  </div>
  <div ng-click="updateh2h3()">Check h2h3 changes</div>
  <div class="card-bottom">
    <div ng-transclude></div>
  </div>
</section>

---

您可以为标题标记创建一个指令，如下所示：

<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>

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>

angular.module（'myApp'）
.指令（“我的标题”，我的标题）；
函数myHeading（）{
返回{
是的，
模板：功能（远程通讯、tAttrs）{
风险等级=数量（状态等级）；
如果（级别<1 | |级别>6）级别=1；//默认值
返回“”；
}
};
}

然后您可以在模板中使用它，如下所示：

<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>

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>

{{headerText}

您只需在指令中添加一个属性，然后使用ng开关设置卡所需的标题即可。看看我做的这个演示

<div class="card">
  <div class="card--Title" ng-switch on="headline">
      <h1 ng-switch-when="h1">{{::headerText}}</h1>
      <h2 ng-switch-when="h2">{{::headerText}}</h2>
      <span ng-switch-default>{{::headerText}}</span>
  </div>
</div>

{{：：headerText}
{{：：headerText}
{{：：headerText}

---

我认为你对这个问题的看法是错误的。您可以为h2和h3定义两个类，然后使用ng类在这两个类之间进行切换，而不是切换标记。为此动态编译标记和操作dom是非常昂贵的操作。

您想在哪里使用标记？它在哪里显示{{headerText}如果可以的话，我希望能够以某种方式将其更改为h2。我同意这个答案，因为在我的特定情况下，它似乎是最简单和最容易实现的。这非常好，除非您需要解析

级别

属性-您知道有什么方法可以解决这个问题吗？我试图创建一个嵌套结构，每个子级都有一个更高级别的头，因此我的属性如下：

level=“{{level+1}}}”

但是当然，

tAttrs.level

现在给出了文本字符串“{level+1}”，我没有父范围来解析它。@AlfieWoodland我会使用接受的答案。事后看来，这个答案相当糟糕，因为它不支持评估动态值。