考虑到您有这种情况:
<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
代码正在执行我需要的操作,但我需要在最终应用程序中对其进行测试。
最佳答案
当我正在开发其他任务时,发布在问题的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 上的某些功能没有空间,您需要将它们放在辅助容器中,覆盖整个页面并适当放置那些需要更多的元素注意力,就像手机上的原生应用程序一样,带有侧面板。+
关于javascript - 如果我将一个元素从一个容器移动到另一个容器,是否存在范围问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35634748/