如何在数据属性（angularJS）上创建监听器？

Question

我有 js 饼图计时器，它从 node.js 获取时间并渲染饼图。

这是代码：

这里我有几个 data-...="" 属性正在渲染饼图

<div id="myStat2" data-dimension="104" data-text="45" data-percent="0"></div>

这里是jQuery我所拥有的一部分，它是某种程度上的倾听者，但不是最佳解决方案。

var time = 0;
setInterval(function(){
    time = $('#myStat2').attr('data-percent');
    $('#myStat2').empty();
    $('#myStat2').attr('data-percent', time);
    $('#myStat2').attr('data-text', parseInt(time));
    $('#myStat2').circliful({animationstep: 0});
}, 100);

这是完全渲染的结果：

这里一切正常，工作正常，但我想这不是最佳解决方案。我以为我可以通过 angularJS 做到这一点，但我不知道它是如何工作的。谁能给我提供更好的东西？

Answer 1

angular 的一个重要概念是避免这种 DOM 绑定，因为已经提供了双向数据绑定。我假设 myStat2 在 angular 范围内，所以为什么不在您的视图中设置范围值：

<div id="myStat2" data-dimension="104" data-text="{{ dataText }}" data-percent="{{ dataPercent }}"></div>

然后您可以直接在 $scope 中更改它：

$scope.dataPercent = time;
$scope.dataText = parseInt(time);

我真的不明白你想要实现什么，但是因为这段代码似乎毫无意义：

time = $('#myStat2').attr('data-percent');
$('#myStat2').empty();
$('#myStat2').attr('data-percent', time);

我建议更好地理解 angular，然后将此图表移动到某种指令中。

如何在数据属性（angularJS）上创建监听器？

How to make listener on data attribute (angularJS)?

javascript

listener

node.js

angularjs