Question

我尝试使用两个依赖项：

"snap.svg": "~0.2.0", # snapsvg.io 
"angular-snap": "~1.4.1", # jtrussell.github.io/angular-snap.js/

我猜，似乎angular-snap使用全局Snap对象作为snap.svg并覆盖Snap.svg的Snap对象。按此顺序，Snap.svg功能消失了。如果我恢复导入的顺序，则会遗漏一些Snap.js功能。

观看此plunkr http://plnkr.co/edit/rE4pNDqQnBh2e5wtqGUO?p=preview并交换包含。

我如何使用这两个库？谢谢！

Answer 1

我认为你最好的选择是使用像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指令。

如何通过角度捕捉一起使用Snap.svg和Snap.js？

1 个答案: