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

【问题标题】：Move HTML content and retain AngularJS two-way data binding移动 HTML 内容并保留 AngularJS 双向数据绑定
【发布时间】：2014-01-11 15:55:03
【问题描述】：

关于 Angular，我不明白一些事情。我有一个 AngularJS 页面，我必须在其中移动内容，但上面有数据绑定。我在这里有一个小提琴来说明我想要做什么，以及问题：http://jsfiddle.net/gbisaga/cmzBL/6/

<input type="text" size="50" ng-model="model.dentist" name="petDentist" />

如果更改“名称”或“类型”字段，下面显示的字符串值会发生变化；但如果你改变狗狗牙医领域，它不会。当我移动内容时，我希望这个元素继续绑定到模型；正如您在小提琴中看到的那样，它不是。

我猜实际发生的情况是在执行 my-append-children 之前填充了字段的值，并且绑定实际上从未发生。我也尝试过更改为编译函数而不是指令中的链接，但效果更差。有些东西我显然没有讲到。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您需要在指令末尾添加：

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

更新的小提琴：Fiddle

您需要编译添加的标记，以便 Angular 可以解释它。

【讨论】：

太棒了！谢谢您的答复。我考虑过 $compile 但我读过的文档并不清楚何时需要使用它。

【解决方案2】：

您需要在将子元素移动到目标后移除该元素。如果您执行 element.remove() 它还将删除该元素及其子元素上的所有绑定和事件处理程序

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

【讨论】：