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

Question

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

这是代码：

这里我有几个数据-... =“”属性正在渲染饼图

<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

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

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

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