javascript - 如果我将一个元素从一个容器移动到另一个容器，是否存在范围问题？

Question

考虑到您有这种情况:

<div class="site-frame">
    <div class="auxiliary"></div>

    <div class="main" ui-view>
        <div class="componentA">
        </div>

        <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4">
            <!-- CONTENTS OF componentB -->
        </div>

        <div class="componentC">
        </div>
    </div>
</div>

元素 .componentB 有一个名为 move-to 的指令，它只是简单地移动该元素的内容，使用 jQuery 子通配符选择器(如 var contents = $('.componentB').find('> *');)，当这些断点中的任何一个在 breakpoints 指令上定义时(这些数字是索引一个阵列，保持断点测量)当前正在发生。

当该指令的某个断点处于事件状态时，DOM 将更改为:

<div class="site-frame">
    <div class="auxiliary">
        <!-- CONTENTS OF componentB -->
    </div>

    <div class="main" ui-view>
        <div class="componentA">
        </div>

        <div class="componentB" move-to=".auxiliary" breakpoints="1,2,3,4">
        </div>

        <div class="componentC">
        </div>
    </div>
</div>

这是我正在处理的一个网站的静态版本中使用的一种响应机制。我需要知道范围继承、事件广播、状态 Controller 是否存在缺陷，它们与 div.main 相关，而 div.main 本身就是 div.auxiliary 的兄弟。

想知道 Angular 如何工作，我想 JS 逻辑层保持在某个范围内引用的 DOM 元素之间的关系。主要针对指令范围，使用 link() 函数，它们本质上是 post-link()，因此 DOM 操作更安全，因为链接已经建立。

请记住，我在 link() 函数中保留了对 .componentB 内容的引用，同时监听范围 $destroy事件，清理事情，避免内存泄漏。也因为这个系统监听 $window.on('resize') 来找出哪个是当前断点，并且在导航过程中，我的示例的内容可能会在它们原来的位置之间移动容器和辅助容器。

所以，问题是:如果我通过 DOM 移动一个元素，即使在它的 ui-view 父元素之外，继续依赖数据绑定(bind)、继承等的变量更新是安全的吗？

由于应用程序的巨大规模，我在实现之前问过这个问题，而且一如既往地在生产运行中，之前没有讨论这个的空间......

编辑 1:

暂时这个CodePen有更多机会:http://codepen.io/anon/pen/JXPvBE?editors=0010

代码正在执行我需要的操作，但我需要在最终应用程序中对其进行测试。

Answer 1

当我正在开发其他任务时，发布在问题的Edit 1 上的解决方案指出了处理此问题的好方法。

虽然对原始 Controller 、父元素的持久性存在一些疑问，但在某种程度上是对这种情况的泄漏，这意味着，例如，模型上的其他更新有可能不受这些变化的影响，到目前为止，没有发现任何问题。

也许在其他情况下它可能会失败，但就目前而言，它运行良好:

http://codepen.io/anon/pen/JXPvBE?editors=0010

在 CodePen 上，在指令 move-to 的开头，编译函数在预链接阶段保留对元素的引用，以防万一，使用它的原始元素来操作它形式，在 Angular 处理之前它也是指令(比如 ng-repeat)，所以我们不会处理那些限制它的指令位置的 Angular 注释:

<!-- ng-repeat: x in collection -->
<li class="repeated-element">
    ...
</li>
<!-- end ng-repeat: x in collection -->

这确实是处理一些响应性问题的好方法，如果 SPA 上的某些功能没有空间，您需要将它们放在辅助容器中，覆盖整个页面并适当放置那些需要更多的元素注意力，就像手机上的原生应用程序一样，带有侧面板。+