Question

我有一个Angular指令。当我在我的页面上调用它时，它仍然显示外部包装器。我怎样才能摆脱这个包装？

directives.js

myApp.directive('myThingy', function(){
  return {
    template: "<div>HELLO!</div>"
  }
});

my_page.html

<html>
  <body>
    <my-thingy></my-thingy>
  </body>
</html>

浏览器中的DOM：

<html>
  <body>
    <my-thingy>
      <div>HELLO!</div>
    </my-thingy>
  </body>
</html>

如何摆脱那些<my-thingy>标签，只显示指令的结果？

所需的DOM（没有my-thingy标签）：

<html>
  <body>
    <div>HELLO!</div>
  </body>
</html>

Answer 1

添加选项replace

myApp.directive('myThingy', function(){
  return {
    replace: true,
    template: "<div>HELLO!</div>"
  }
});