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

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

本文关键字：属性 变化 修改 jQuery 何使用 AngularJS 观察      更新时间：2023-09-26

我有一个属性aria-valuenow，这是由jQuery修改的rateit星评级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中捕获该值并提交它。

最快、最简单的方法如下:实际上，在控制器中编写一个函数，检查并返回area-valuenow的值。然后$watch它的输出，当它改变时，在手表的回调中做一些事情。

不幸的是，这意味着angular将不断运行这个检查返回函数。在一个小应用程序中，你可能会侥幸逃脱。

一个更有角度的计划是修改插件，使其在控制器中运行，并且可以在修改DOM的同时修改作用域值。

相关文章：