javascript - 访问 angularjs 范围变量并将其分配给 html 中的脚本标签属性

Question

我有一些数据作为范围变量存储在 Controller 中，并希望将它们分配给脚本标记的属性，该脚本标记以 html 实现并用于支付网关。

以下是范围变量:

$scope.selectedPlan = plan;

这里的 selectedPlan 是具有以下值的数据对象数组:

plan_id: 3
plan_name: "Basic"
price: "30"
validity_text: "30 days"

需要访问上面的一些值，例如在 html 文件中实现的脚本标记中的价格。以下是脚本标签的代码:

<script
                src="https://checkout.stripe.com/checkout.js" class="stripe-button"
                data-key="pk_test_ghxvjhdasfwdadsd"
                data-amount="{{selectedPlan.price}}*100"
                data-name="Amazing Test"
                data-description="Amt: $ {{selectedPlan.price}}"
                data-image="http://test.com/assets/Images/globe.png">
              </script>

在上面编写的代码中，selectedplan 是 Controller 的范围对象，价格属性需要分配给脚本标签的 data-amount 和 data-description 属性。由于我是 angularjs 的新手，不知道如何实现它。

请帮助我实现我想要的。

Answer 1

如果您想动态计算脚本标记的属性，则需要使用 ng-attr指示。代码变为:

<script
   src="https://checkout.stripe.com/checkout.js"
   class="stripe-butt"
   data-key="pk_test_4RvHCPGrrtHK9dW0vqO938ge"
   ng-attr-data-amount="{{selectedPlan.price*100}}"
   data-name="Amazing Minds"
   ng-attr-data-description="Amt: $ {{selectedPlan.price}}"
   data-image="http://itutor.staging.broadweb.com.au/assets/Images/itutorglobe.png">
</script>

但是 Angular 它并不意味着动态修改 <script>标签。我自己从未尝试过，但我很确定脚本标记只会使用初始参数读取一次，甚至在 Angular 有时间编译它们之前也是如此。

解决这个问题的一种方法是使用 Angular 的 $compile 编译该代码。在将服务附加到 DOM 之前。

然而，这可能使事情过于复杂化。你最好手动创建它。操作方法如下:Dynamically create a script tag