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

为什么用子指令替换指令的元素会破坏子指令的绑定

这里有一个非常基本的例子来说明这个问题：

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中，用法如下所示：

如果replaceWith是在link函数中完成的，或者如果指令的作用域设置为true或{}，则会出现相同的行为

<foo></foo>