考虑到您有这种情况：
<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，该指令仅移动该元素的内容，并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父元素之外，仍然可以依靠数据绑定，继承等变量更新吗？
由于应用程序的规模巨大，并且在生产方面的运行中一如既往，我在实施之前会问这个问题，之前没有讨论这个问题的余地...
此CodePen暂时有更多机会：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上没有剩余功能的余地，您需要将它们放在辅助容器中，该容器应覆盖整个页面并正确放置那些需要更多注意的元素，例如带侧面板的手机上的本机应用程序。+
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句