我认为你最好的选择是使用像 RequireJS 这样的模块加载器以受控方式将 Snap.js 和 Snap.svg 拉入你的应用程序,看起来它们都支持 AMD 模块加载器。
不幸的是,这意味着您将无法再依赖 Angular Snap 的 snap-content 指令。您需要自己创建一个新的 Snap.js snapper 实例并使用snapRemote#register。
这是一些伪代码:
require(['jakiestfu/Snap.js/snap'], function(SnapJS) {
snapRemote.register(new SnapJS(snapOptions));
});
require(['adobe-webplatform/Snap.svg/snap.svg'], function(SnapSVG) {
// Do stuff with SnapSVG...
});
此外,您需要为初始化 snapper 的元素分配一个 "snap-content" 类名(这通常也由 snap-content 指令处理)。
编辑:
我不推荐这种方法,但如果您不介意一些黑客攻击,它应该也可以工作:
在你的脑海中:
<script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg.js" type="text/javascript"</script>
<script>
// Save Snap.svg before it gets clobbered!
window.SnapSVG = Snap;
</script>
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
之后,您可以继续将 svg Snap 用作 SnapSVG 或任何您想调用的名称。模块加载器方法可以说在几乎任何你想看的方式上都更好......除非你需要明天发货:)。
编辑 2:
我刚刚发布了 Angular Snap v1.5.0,它使 Snap.js 构造函数成为注入依赖项,而不是我们只是在窗口中寻找的东西。你现在可以提供自己的构造函数,也许在它被破坏之前保存它:
myApp.config(function(SnapConstructorProvider) {
SnapConstructorProvider.use(window.Snap);
});
使用它,即使您使用模块加载器拉入 Snap.js 脚本,您仍然可以利用 snap-content 指令。