accessing angularjs scope variables and assigning it to script tag attributes in html

Question

I have some data stored in controller as scope variables and want to assign them to the attributes of a script tag which is implemented in html and used for payment gateway.

following are the scope variables:

$scope.selectedPlan = plan;

here the selectedPlan is array of objects of data with following values :

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

need to access some of above values like price in a script tag which is implemented in html file. Following is the code for script tag:

<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>

Here in above written code the selectedplan is the scope object of controller and price attribute needs to be assigned to the data-amount and data-description attribute of script tag. As i am new to angularjs dont know how to implement it.

Please help me achieve what i want.

oh that was typed bymistakely while posting question i am editing it. Its not working dont know — Niranjan Balkrishna Prajapati
– Niranjan Balkrishna Prajapati, Commented Apr 16, 2015 at 6:43
you might have to dynamically build the script tag using the dom, i'm not sure it will reload once composited... — dandavis
– dandavis, Commented Apr 16, 2015 at 6:43
how to do that please let me know dynamicallly build script tag using dom — Niranjan Balkrishna Prajapati
– Niranjan Balkrishna Prajapati, Commented Apr 16, 2015 at 6:44

floribon · Accepted Answer · 2015-04-16 06:48:48Z

If you want to dynamically compute attributes for you script tag, you need to use the ng-attr directive. The code becomes:

<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>

However Angular it not meant to dynamically modify a <script> tag. I have never tried this myself, but I am pretty sure the script tag will only be read once with the initial parameters, even before angular has the time to compile them.

One way to work around that would be to compile that code with Angular's $compile service before appending it to the DOM.

However this is probably over-complicating things. You'd better create it manually. Here is how to do that: Dynamically create a script tag

Collectives™ on Stack Overflow

accessing angularjs scope variables and assigning it to script tag attributes in html

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related