javascript - 如何在 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 模板无法识别标签，因为它们用于将 Controller 绑定(bind)到 html。

Answer 1

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

1. 在 Assets 文件夹中创建一个名为“scripts”的文件夹(为了更好的结构)
2. 将脚本文件添加到此文件夹中
3. 打开 Angular 项目根目录中存在的 angular.json 文件
4. 将文件路径添加到脚本键

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