StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POChanges in jQuery UI not reflected on Angular models
text
Body
copied!<p>I have a form which is in a directive. It contains 2 select dropdowns (jQuery styled) and one jQuery UI slider, so it's all consistently themed.</p> <p>Dropdown 1 is populated at spawn, as simple as they come. Dropdown 2 gets populated when the value of Dropdown 1 changes. This happens because dropdown 1 has <code>ng-change="refreshModels()"</code> attached to it. This works like a charm.</p> <p>However, sliders are more problematic. In order to get the value of the slider, I need to have a hidden input field which gets populated with $.val() on every change in the slider position. The value updates correctly, and even the change event fires (when I put <code>onchange="console.log('I changed')"</code> onto the hidden field, I get everything logged nicely).</p> <p>However, the ng-model attached to that very same hidden field never updates. Ng-change never triggers, unlike onchange.</p> <p>So I <a href="https://plus.google.com/u/0/104771776404197897488/posts/RFfFZ9Nujus" rel="nofollow">asked around</a> and tried doing this in the jQuery slider's slide handler:</p> <pre><code>angular.element($(this)).scope().$apply(); </code></pre> <p>But no dice. Nothing happens. Trying to call a model which I know exists in that directive like so:</p> <pre><code>angular.element($(this)).scope().model_that_definitely_exists; </code></pre> <p>yields undefined. Trying to access a model in the parent controller of the directive also yields undefined.</p> <p>Why is it so difficult to make Angular register changes made by means other than direct user input on the field? What am I doing wrong?</p> <p>P.S. I tried putting ng-mouseup onto the element that becomes the slider, and that calls the refresh method fine - but diregards the hidden fields. To Angular, those are still undefined, even though realistically, they have values - the slider put them there.</p> <p>P.P.S. I also tried putting a $watch onto the model I expect to change after moving the slider, nothing. The model's value never changes, even if the field's val actually does.</p> <p>P.P.P.S. I just found this sad state of affairs. <a href="https://github.com/angular-ui/angular-ui/issues/252" rel="nofollow">https://github.com/angular-ui/angular-ui/issues/252</a> If anyone has a workaround, I'd be much obliged.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload