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

Is there scope issues if I move one element from one container to another?

本文关键字：一个 问题 范围 存在 另一个 是否 元素 如果 移动      更新时间：2023-09-26

考虑到你有这种情况：

<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>

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

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

请记住，我在link()函数中保留了对.componentB内容的引用，同时侦听范围$destroy事件，以澄清问题，避免内存泄漏。还因为此系统侦听$window.on('resize')以找出哪个是当前断点，并且在导航过程中，我的示例的内容可以在其原始容器和辅助容器之间移动。

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

由于应用程序的巨大规模，我在实施之前问这个问题，并且与生产方面的运行一样，以前没有讨论这个问题的余地......

编辑 1：

暂时，这个代码笔有更多的机会：http://codepen.io/anon/pen/JXPvBE?editors=0010

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

当我开发其他任务时，问题编辑 1 上发布的解决方案指出了解决此问题的好方法。

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

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

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

在

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

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

这确实是处理一些响应问题的好方法，SPA上的某些功能没有空间，您需要将它们放置在一个辅助容器中，该容器覆盖整个页面并正确放置那些需要更多关注的元素，例如手机上的本机应用程序，带有侧面板。

相关文章：