Javascript 移动HTML内容并保留AngularJS双向数据绑定

有些事我不太明白。我有一个AngularJS页面，我必须在其中移动内容，但上面有数据绑定。我这里有一把小提琴，它说明了我想做什么，以及问题所在：

如果更改“名称”或“类型”字段，下面显示的字符串值将更改；但是，如果你改变了狗牙科领域，它不会。当我移动内容时，我希望此元素继续绑定到模型；正如你在小提琴上看到的，它不是

---

我猜实际发生的是在执行append子项之前填充字段的值，并且绑定从未真正发生过。在指令中，我也尝试过将其更改为编译函数而不是链接，但效果更差。有一点我显然没有理解。

您需要在指令末尾添加以下内容：

$compile(target.contents())(scope);

更新的小提琴：

---

您需要编译添加的标记，以便angular能够解释它

将子元素移动到目标后，需要删除该元素。 如果执行element.remove（），它还将删除该元素及其子元素上的所有绑定和EventHandler

    .directive('myAppendChildren', function() {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var target = $(attrs.target);
            target.append(element.children());
            element.remove();
        }
    };
})

---

杰出的谢谢你的回复。我考虑过$compile，但我读过的文档并不清楚何时需要使用它。

    .directive('myAppendChildren', function() {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var target = $(attrs.target);
            target.append(element.children());
            element.remove();
        }
    };
})