移動HTML內容並保留AngularJS雙向數據綁定

Question

我對Angular不太了解。 我有一個AngularJS頁面，我必須在其中移動內容，但要在上面綁定數據。 我在這里有一個小提琴，用來說明我想做的事和問題： http : //jsfiddle.net/gbisaga/cmzBL/6/

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

如果更改“名稱”或“類型”字段，則下面顯示的字符串值會更改； 但是如果您更改狗牙醫字段，則不會。 當我將內容移到上方時，我希望此元素繼續與模型綁定； 正如您在小提琴中看到的那樣，事實並非如此。

我猜測實際發生的是在執行my-append-children之前，字段的值已被填充，並且綁定從未真正進行過。 我還玩過更改為編譯功能而不是指令中的鏈接的方法，但是效果不佳。 我顯然沒有到達這里。

Answer 1

您需要在指令末尾添加此代碼：

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

更新的小提琴： 小提琴

您需要編譯添加的標記，以便angular可以解釋它。

Answer 2

將子級移動到目標后，需要刪除該元素。 如果執行element.remove（），還將刪除該元素及其子元素上的所有綁定和事件處理程序

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