如何在 angular 模板中包含外部 javascript？

Question

我有一个名为 index.html 的页面，其表单依赖于外部 javascript:

<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
<script>
var clientToken = removed
braintree.setup(
          // Replace this with a client token from your server
          clientToken,
          "dropin", {
            container: "payment-form",
            form: "checkout",
          });
</script>

在将此页面与 angular 集成之前，我测试它是否有效，但现在我已将此页面集成为 angular 状态：$stateProvider

 .state('billing', {
        url: '/billing',
        views: {
            'main': {
                controller: 'BillingController as billingCtrl',
                templateUrl: '/billing/index.html'
            }
        }
    });

我在路由到所述页面时收到这些错误：

我想避免依赖像 braintree-angular 这样的第三方库。在我看来，angular 模板无法识别标签，因为它们用于将控制器绑定到 html。

Answer 1

构建过程中生成了一个 index.html，其中包含所有资产，包括 js/controller 文件。包含外部 js 文件的答案只是将我的脚本标记插入到包含所有依赖项的 index.html 文件中。

Answer 2

包含 js 文件的最佳方法是将其路径添加到 Angular.js 中的脚本键（字符串数组）：

在 assets 文件夹中创建一个名为 scripts 的文件夹（为了更好的结构）
将您的脚本文件添加到此文件夹中
打开存在于 angular 项目根目录中的 angular.json 文件
将文件路径添加到脚本键

{
  "projects": {
    "you-will-find-your-project-name-here": {
      "architect": 
            "scripts": ["src/assets/scripts/myScriptsFile.js,]
          },
          ....
}

如何在 angular 模板中包含外部 javascript？

How to include external javascript in angular template?

javascript

braintree

angularjs