gpt4 book ai didi

javascript - 如何使用 AngularJS 观察 jQuery 修改的属性值的变化

转载 作者:行者123 更新时间:2023-12-03 12:03:02 30 4
gpt4 key购买 nike

我有一个属性aria-valuenow,它正在 rateit 中被 jQuery 修改。当用户在提交评论表单时进行评级或更改评级时,星级评级 jQuery 插件。

以下是我用来显示插件的星星的 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>

在上面的html中,plugin-rate-it是我初始化插件的指令,否则不会显示星星。以下是该指令的代码。

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

现在,下面是上面的 html 代码在页面加载时呈现的 html。我从页面的源代码中得到了它。

 <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>

因此,当用户进行评分或更改评分时唯一会更改的属性是 aria-valuenow 属性。

有人可以帮助我了解如何监视 aria-valuenow 属性值的变化,以便我可以在 ng-model 中捕获该值code> 我的评论表格并提交。

最佳答案

最快、最黑客的方法是 here 。本质上,在 Controller 中编写一个函数来检查并返回area-valuenow的值。然后$watch它的输出,并在它发生变化时在watch的回调中执行一些操作。

不幸的是,这意味着 Angular 将不断运行该检查和返回函数。在小型应用程序上,您可能会逃脱惩罚。

一个更 Angular 计划是修改插件,使其在 Controller 内运行,并且可以在修改 DOM 的同时修改作用域值。然后您可以更有效地观察该范围值。

关于javascript - 如何使用 AngularJS 观察 jQuery 修改的属性值的变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25320444/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com