Question

在AngularJS中，如何访问指令属性所在元素的实际html。我对编辑它的属性不感兴趣，我想实际操作html本身。将元素更改为范围，甚至将其更改为注释。

例如：

<div my-directive>
    <h1>hey</h1>
</div>

我想改为：

<span my-directive>
    <h1>hey</h1>
</span>

甚至是：

<!-- div my-directive -->
    <h1>hey</h1>
<!--/div -->

Answer 1

你可以尝试这个：http://jsfiddle.net/YWfSF/3/

.directive('myDirective', function() {
  return {
    compile: function(elem) {
        elem.replaceWith('<span>' + elem.html() + '</span>');
    }
  }
});

Answer 2

这是一个非常简单的例子。根据您的需要，您必须延长一点。

app.directive('mydirective', function() {
  return {
    restrict:'A',
    template: '<span my-directive><h1>hey</h1></span>',
    replace:false,
    compile: function compile(tElement, tAttrs, transclude){
      console.log('tElement',tElement);
      console.log('tAttrs',tAttrs);
      console.log('transclude',transclude);
    }
  }
});

我知道，这是概括的，但你的问题也是如此;）玩得开心！

编辑：forgot plunkr link

如何通过指令编辑元素的html

2 个答案: