[英]How to watch for changes in attribute value modified by jQuery, using AngularJS
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. 我有一个属性
aria-valuenow
,当用户执行评分或在提交审阅表单时更改评分时,该属性会由jQuery在Rateit星级星级jQuery插件中进行修改。
Following is the html snippet I use to display the stars of the plugin. 以下是我用来显示插件星星的html代码段。
<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. 在上面的html
plugin-rate-it
中,我已经初始化了该插件,否则不显示星星。 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. 现在,下面是页面为上面的html代码加载时呈现的html。 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. 因此,当用户执行评分或更改评分时,唯一会更改的属性是
aria-valuenow
属性。
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. 有人可以帮助我理解我如何监视
aria-valuenow
属性的值的更改,以便我可以在查看表单的ng-model
中捕获该值并将其提交。
The quickest, hackiest way to do this is here . 最快,最hackest的方法是在这里 。 Essentially, write a function in a controller that checks and returns the value of
area-valuenow
. 本质上,在控制器中编写一个函数来检查并返回
area-valuenow
的值。 Then $watch
its output, and do something in the callback of the watch when it changes. 然后
$watch
它的输出,并在它更改时在watch的回调中执行某些操作。
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. 一种更具角度的计划是修改插件,以使其在控制器内运行,并且可以在修改DOM的同时修改范围值。 Then you can watch that scope value more efficiently.
然后,您可以更有效地观察该范围值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.