0

I'm trying to set a value of an Angular textarea using a Chrome extension. As this is a Chrome extension, I do not have access to the website's source and so cannot use Angular directives.

A quick background to what I'm trying to achieve, I have a drop down box where I can select values, selecting a value from the drop box will call a javascript function to populate a textarea with the value selected from the drop down control.

I can get the text to update on the Angular textarea by getting the ID of the element and setting it with the .val() method, however setting the values programmatically does not set the "isdirty" method of of Angular textarea.

I have seen that the "isdirty" property can be set manually by using triggers to emulate input on the textarea but it does not seem to work as the textarea's "ng-untouched" value is still set. Only when I click on the textarea (after the .val() function is called and the textarea is now populated) and click out of it does the "ng-touched" value get set.

I just have a basic selector as so

var notes = $("#notes").val();

notes.trigger("change");

I have tried using the following keywords within the trigger method, and also tried using them directly (i.e. .change() etc), keyup, onkeyup, input, change, and none of them works for me.

$('#notes').get(0).change();

There are no error showing on dev tools.

Is there something that I'm missing which is preventing this from happening?

Hanho
  • 229
  • 1
  • 4
  • 16
  • Just do `$("#notes").val($("#notes").val()+" ");`. Append space character to the text area value and Angular should do the rest. :) – AdityaParab Apr 21 '16 at 10:16
  • Angular looks for change state events on `ngModel` bound to the input element in question. It doesn't pay attention to the events triggered on the elements. So the `trigger` goes unnoticed. When you update the values in the input element, the model change event is triggered and hence it should work correctly that way – AdityaParab Apr 21 '16 at 10:18
  • 1
    This can be of help: https://stackoverflow.com/questions/17152932/chrome-extension-how-to-send-keydown-event-to-pages-input – Xan Apr 21 '16 at 10:19
  • @AdityaParab thanks for your suggestion Aditya, unfortunately in my case this isn't working. I wonder if it's due to my project being a Chrome extension trying to update a page which uses Angular (which I have no control of). Have you had any experience trying to use Jquery from a Chrome extension (which has injected elements into the DOM) to update an Angular element (which is not part of the Chrome extension)? – Hanho Apr 21 '16 at 10:40

0 Answers0