图像编辑器不应该在每次启动时创建新的 DOM 元素,因此我们可能需要查看一些代码才能弄清楚在这种情况下发生了什么。
示例回购
我有一个使用 Angular、UI Router 和 Creative SDK Image Editor 的简单演示存储库。
除了自述文件中的步骤之外,您还需要转到server/index.html
并取消注释该<navbar>
指令。
用户界面
当你运行应用程序时,你会看到这个(图片下方的解释):
注意:在这种情况下,导航栏本身与预期的演示无关,但将演示 UI 路由器和图像编辑器共存。
导航栏中的链接是 UI 路由器状态(ui-sref=home
和ui-sref=modules
)。
“编辑图像”按钮启动 Creative SDK 的图像编辑器。您可以在 中找到此代码/client/pre-build/home/
。
DOM
图像编辑器包含在 id 为 的 div 中avpw_holder
。
以下是您将在 Chrome Devtools 中看到的关于此 repo 的 home 状态的内容:
<html lang="en">
<head></head>
<body ng-app="Meaniscule" class="ng-scope">
<navbar>...</navbar>
<!-- uiView: -->
<div ui-view="" class="container ng-scope">...</div>
<div id="avpw_holder">...</div>
</body>
</html>
启动和关闭图像编辑器将切换一些处理图像编辑器可见性的类,但不会在 DOM 中创建图像编辑器的新实例。
即使您切换状态也是如此: