Control Angular JS element from a thirdparty raw javascript

Question

This is the first time I'm working with a site built in Angular JS. I write thirdparty marketing javascript tags which merchants load on their site as the last element in the HTML. The JS tag simply looks for elements on the merchant site and grab data or take control of the discount code form.

I essence, I would like my externally loaded JS tag to automatically set the value of the discount code input field and trigger a click on the button next to the form. This is the HTML for the discount code elements on the merchant web page:

<div ng-if="BasketViewModel.ShowDiscountBox == true" class="ng-scope">
     <input class="form-control ng-pristine ng-invalid ng-invalid-required ng-touched" id="discountcode" ng-model="BasketViewModel.DiscountCode" type="text" ng-enter="applyDiscount(BasketViewModel.DiscountCode)" required="">
     <button id="addcode" class="btn btn-default ng-binding" type="button" ng-click="applyDiscount(BasketViewModel.DiscountCode)">Go!</button>
            </div>

In my javascript, I have;

document.getElementById('discountcode').value = '10OFF';
document.getElementById('addcode').click();

It seems the value '10OFF' is not getting passed to the handler for the button click. The Ajax request (not visible to me) that submits the code passes 'null' as the entered value despite this.

Is there a way to programmatically enter the code and submit it onbehalf of the user outside of Angular JS?

Please help - I am a back-end developer and have no knowledge of Angular but I need to sort this out to get the client onboard.

score 0 · Answer 1 · edited May 23 '17 at 12:24

IMHO you are fighting a losing battle given the complications of Angular/Non-Angular interop and the challenges of doing so with the different versions of Angular. In any case, read this discussion carefully:

https://stackoverflow.com/a/10508731/559095

Even though you could call angular.element(document.getElementById...) and get it's scope() in Angular versions lower than 1.3 angular debug will need to be enabled by the merchant, and they may not have enabled it in production.

And even if it works now, what happens when they upgrade to Angular >=1.3 ?

Control Angular JS element from a thirdparty raw javascript

1 Answers1