用子项替换指令元素会破坏Angular中的绑定 - 为什么？

Question

为什么用子句替换该指令的元素会破坏子节点的绑定？

这是一个非常基本的例子，说明了有问题的问题：

app.directive("foo", function(){
  return {
    template: "<input ng-model='foo'><pre>foo: {{foo}}</pre>",
    compile: function(tElem){

      // this line breaks the binding
      tElem.replaceWith(tElem.children());
    }
  };
});

在HTML中，用法如下：

<foo></foo>

如果在replaceWith函数中完成link，或者指令的范围设置为true或{}

，则行为相同

plunker