Angular JS 和外部库答案

【问题标题】：Angular JS and external librariesAngular JS 和外部库
【发布时间】：2015-01-09 14:24:25
【问题描述】：

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

我知道我可以将<script type="text/javascript"> 放入一个有角度的 HTML 视图中并在那里使用这些方法，但这真的很难看。

这还能怎么做？

【问题讨论】：

在
+1 天主教。再说了，那是公共图书馆吗？如果是，请考虑检查 Angular 模块是否可用。
这是 Braintree 库 (braintreepayments.com/docs/javascript)，他们没有 Angular 模块。我试图把它放在其他任何东西之前，但我不知道如何将它注册为 Angular 模块/依赖项并在控制器上使用它。
嗯，你可以将它包装在一个角度模块中，但它不会真正是全局的。正如 Cathal 所说，只需在包含 Angular 之前包含它就可以了。

标签： javascript angularjs

【解决方案1】：

哦，我找到了，只需附加到 $window 即可。

写在这里：https://developers.braintreepayments.com/javascript+node/sdk/client/setup

"SDK 将在全局窗口对象上显示为大脑树。"

因此，您可以从您的控制器（例如）简单地使用$window.braintree，然后您就可以从 Braintree 客户端库中获得所需的一切。

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

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

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

    }
]);

【讨论】：

提供的链接已更改

【解决方案2】：

在 Angular 之前包含它，你应该没问题

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

将它与 Angular 一起使用应该不是问题。

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

如何将两者结合使用的示例答案：Encrypting credit card details using AngularJS in Braintree

【讨论】：