访问angularjs作用域变量并将其分配给html中的脚本标签属性

Question

我有一些数据作为范围变量存储在控制器中，并希望将它们分配给脚本标记的属性，该标记以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是控制器的作用域对象，并且价格属性需要分配给脚本标签的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有时间编译它们之前，脚本标签也只能使用初始参数读取一次。

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

但是，这可能会使事情复杂化。 您最好手动创建它。 操作方法如下： 动态创建脚本标签