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

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>

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

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

请记住,我在监听范围事件时保留函数.componentB内容的引用,以清除内容,避免内存泄漏.此外,因为该系统侦听以找出哪个是当前断点,并且在导航期间,我的示例的内容可能在其原始容器和辅助容器之间移动.link()$destroy$window.on('resize')

所以,问题是:如果我通过DOM移动一个元素,即使在它的ui-view父级之外,可以安全地继续计算数据绑定,继承等的变量更新？

我在实施之前就问过这个问题,因为应用程序的大小很大,并且一如既往地以生产方式运行,之前没有空间讨论这个......

编辑1:

暂时,此CodePen有更多机会:http://codepen.io/anon/pen/JXPvBE？edit = 0010

代码正在做我需要的,但我需要在最终的应用程序内测试它.

Answer 1

当我正在开发其他任务时，问题的编辑 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 上的某些功能没有空间，您需要将它们放置在辅助容器中，该容器覆盖整个页面并正确放置那些需要更多关注的元素，例如手机上的本机应用程序，带有侧面板。+