Angular JS和外部库

Question

我有一个第三方JavaScript库（不是Angular），我想从Angular中使用它的方法/对象。

我知道我可以在Angular HTML视图中放置<script type="text/javascript">并在那里使用这些方法，但那样太丑陋了。

还有其他方法吗？

- michelem

---

将该库包含在 index.html 文件中，在指向 Angular 的 <script> 标签之前，并且它应该是可用的。 - Cathal

+1 Cathal。此外，这是一个公共库吗？如果是的话，请考虑检查是否有Angular模块可用。 - Nicolas

这是Braintree库（https://www.braintreepayments.com/docs/javascript），但他们没有一个Angular模块。我尝试将其放在任何其他内容之前，但我不知道如何将其注册为Angular模块/依赖项，并在控制器上使用它。 - michelem

你可以将它包装在一个Angular模块中，但这样它就不是真正的全局变量了。像Cathal所说的那样，在包含Angular之前包含它，你应该就没问题了。 - SoluableNonagon

Answer 1

好的，我找到了，只需将其附加到$window上，你就完成了。

如此写道：https://developers.braintreepayments.com/javascript+node/sdk/client/setup

"SDK 将出现在全局 window 对象上，名称为 braintree。"

因此，从您的控制器（例如）中，您可以简单地使用$window.braintree，并从 Braintree 客户端库获取所需的所有内容。

要加载 Dropin，您可以简单地使用以下代码：

angular.module('app').controller('YourController', ['$scope', '$window',
    function ($scope, $window) {

        $window.braintree.setup('CLIENTTOKEN', 'dropin', {
            container: 'dropin'
        });

    }
]);

- michelem

---

链接已更改。 - igrossiter

Answer 2

在 Angular 之前引入它，你就可以顺利运行了。

<script type="text/javascript" src="braintree.js">
<script type="text/javascript" src="angular.js">

在使用angular时不应该有问题。

你能否创建一个简单问题的Plunker或JSFiddle？

如何将两者结合使用的示例答案：在Braintree中使用AngularJS加密信用卡详细信息

- SoluableNonagon