在DOM

Question

在角度应用程序中，我想将一个元素从DOM树的一部分移动到另一部分，而不必重新加载附加到移动元素的控制器。

我创建了一个简化的plunker来说明：http://plnkr.co/edit/sqBRM3ZQ5G9xpiNd1MXm?p=preview

在这个plunker中，唯一要保留的数据是toggler状态，但实际上它可能是非常大量的数据，这可能需要花费很多精力才能初始化。

我想要做的是能够将模板1从指令1移动到指令2，但我想保留切换器的状态。在这种情况下，如果您单击切换器使其变为绿色，然后单击＆＃34;从列表1移动到2＆＃34;两次，它会将它移动到指令2，但将颜色重置为红色。

为了避免这种情况，我可以在不通知角度的情况下移动元素，但这显然会创建一个破坏的应用程序状态。

我想过将控制器从旧范围移动到新范围，但我觉得这会导致关闭问题，因为旧控制器可能引用了不再存在于DOM等中的旧元素。

有解决这个问题的好方法吗？

添加一些代码，因为StackOverflow需要它，但请改为使用plunker：

angular.module('app').controller('bodyController', ['$element', function ($element) {

    this.contents1 = [{
        path: 'template1.html'
    }, {
        path: 'template2.html'
    }];

    this.contents2 = [{
        path: 'template3.html'
    }, {
        path: 'template4.html'
    }];

    this.move12 = function () {
        this.contents2.push(this.contents1.pop());
    };

    this.move21 = function () {
        this.contents1.push(this.contents2.pop());
    };

    this.naiveMove12 = function () {
        var $elem = $($element);
        $elem.find('container-list:eq(0) > div').last()
            .appendTo($elem.find('container-list').eq(1));
    };

    this.naiveMove21 = function () {
        var $elem = $($element);
        $elem.find('container-list:eq(1) > div').last()
            .appendTo($elem.find('container-list').eq(0));
    };

    this.logScope = function () {
        var $elem = $($element);
        [].forEach.call($elem.find('container-list'), function (elem, idx) {
            console.log(idx + ': ', angular.element(elem).isolateScope().containerListCtrl);
        });
    };
}]);