编辑1：

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本身就是link()的兄弟。

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

请记住，我在link()函数内部引用$destroy内容，同时监听范围$window.on('resize')事件，以清除内容，避免内存泄漏。此外，因为此系统侦听SELECT icDate, format(ifnull(sum(icCost), 0),2) as icCost, count(icDate) as entries FROM incomp WHERE icDate BETWEEN '2016-01-01' AND '2016-01-05' AND compID = 'DDY' group by icDate;以找出当前断点，并且在导航期间，我的示例的内容可能会在原始容器和辅助容器之间移动。

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

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

编辑1：

暂时，此CodePen有更多机会：http://codepen.io/anon/pen/JXPvBE?editors=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上的某些功能没有空间，您需要将它们放在辅助容器中，覆盖整个页面并正确放置那些需要更多功能的元素注意，就像手机上的本机应用程序一样，带有侧面板。+

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

编辑1：

1 个答案: