模型执行时，进度条的最大值不会更改

Question

我正在使用Angular UI Bootstrap和以下代码来显示进度条：

<tr ng-repeat="hero in gamedata.heroes">
    <td>{{hero.name}}</td>
    <td><progressbar max="hero.nextLevel" value="hero.xp">{{hero.xp}}/{{hero.nextLevel}}</progressbar></td>
</tr>

这一开始工作正常，但它打破了我在模型中更改hero.nextLevel的那一刻。进度条内的文本更新正常，但似乎没有更改max属性。进度条仍然完全填充它首次设置的值，然后继续增长（这是不可见的，但是如果你检查它，宽度属性仍在改变），直到它达到新值{{1 }}

例如，hero.nextLevel设置为10.达到此值后，将其设置为20并将XP设置为0.当XP达到10时，现在将再次填充进度条，然后继续直到它达到20，它将再次重置。

为什么模型更改时不会更改max属性？我怎样才能让它与模型一起更新？

Answer 1

progressbar指令仅关注value和type属性as evidenced by the corresponding code中的更改。文档在属性名称后面有一个小眼睛图标，这可能在此表示这一事实。

因此，除非您自己扩展指令，否则无法使用模型更新max值。