How to watch for changes in attribute value modified by jQuery, using AngularJS

Question

I have an attribute aria-valuenow which is being modified by jQuery in the rateit star rating jQuery plugin when a user does the rating or changes that rating when submitting a review form.

Following is the html snippet I use to display the stars of the plugin.

<div class="review">
    <input type="range" value="0" step="0.25" id="backing4">
    <div class="rateit" plugin-rate-it="{backingfld: '#backing4', resetable: 'true', ispreset: 'false', min: 0, max: 5}" data-rateit-backingfld="#backing4" data-rateit-resetable="false"  data-rateit-ispreset="true" data-rateit-min="0" data-rateit-max="5"></div>
</div>

In the above html plugin-rate-it is a directive I have that initialized the plugin, otherwise the stars are not displayed. Below is the code for the directive.

myApp.directive('pluginRateIt', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).rateit(scope.$eval(attrs.pluginRateIt));
        }
    };
});

Now, below is the html that is rendered when the page loads for the html code above. I've got it from the page's source code.

 <div class="review">
      <input type="range" value="0" step="0.25" id="backing4" class="ng-pristine ng-valid" style="display: none;">
      <div class="rateit" plugin-rate-it="{backingfld: '#backing4', resetable: 'true', ispreset: 'false', min: 0, max: 5}" data-rateit-backingfld="#backing4" data-rateit-resetable="false" data-rateit-ispreset="true" data-rateit-min="0" data-rateit-max="5">
        <button id="rateit-reset-2" data-role="none" class="rateit-reset" aria-label="reset rating" aria-controls="rateit-range-2" style="display: none;"></button>
        <div id="rateit-range-2" class="rateit-range" tabindex="0" role="slider" aria-label="rating" aria-owns="rateit-reset-2" aria-valuemin="0" aria-valuemax="5" aria-valuenow="0" aria-readonly="false" style="width: 80px;     height: 16px;">
            <div class="rateit-selected rateit-preset" style="height: 16px; width: 0px; display: block;"></div>
            <div class="rateit-hover" style="height: 16px; display: none; width: 0px;">             
        </div>
        </div>
      </div>
</div>

So, the only attribute that changes when the user does the rating or changes the rating is the aria-valuenow attribute.

Could somebody help me understand that how could I watch for the changes in the value of the aria-valuenow attribute, so that I could capture that value in the ng-model of my review form and submit it.

Can you not just set the value to a scope value? That way when the user changes the rating, it updates itself. — badAdviceGuy
– badAdviceGuy, Commented Aug 15, 2014 at 2:52
@badAdviceGuy: The attribute aria-valuenow is displayed on the html source of the page only after the page has been loaded. The RateIt jQuery plugin seems to be doing its thing to do that. I could only assign it its initial value through the value attribute in the <input type="range" value="0" step="0.25" id="backing4"> element. — skip
– skip, Commented Aug 15, 2014 at 3:12
@badAdviceGuy: On further inspection, I figured out that is I set the value of the value attribute in the input tag to something in scope, for example, value="{{stars}}", to keep in sync with the value of aria-valuenow attribute, thinking that it would give me the aria-valuenow attribute's value in $scope in my controller, I found out that if I do that then the aria-valuenow is set to 50 by the plugin for some reasons. — skip
– skip, Commented Aug 15, 2014 at 3:32

Community · Accepted Answer · 2017-05-23 10:33:32Z

1

The quickest, hackiest way to do this is here. Essentially, write a function in a controller that checks and returns the value of area-valuenow. Then $watch its output, and do something in the callback of the watch when it changes.

Unfortunately, this means angular will be running that check-and-return function constantly. On a small app, you might get away with this.

A more angular-ish plan would be to modify the plugin so that it runs inside a controller and can modify a scope value at the same time as it is modifying the DOM. Then you can watch that scope value more efficiently.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Aug 15, 2014 at 3:35

Chris

7,3383 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to watch for changes in attribute value modified by jQuery, using AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related