Javascript ng repeat中每秒更改10次的按钮导致无法单击 描述

我有一个网页的一部分，显示每个队的名字和分数，每个队有两个按钮（分数-1和分数+1）

团队是一个数组，使用ng repeat显示团队

    <!-- Teams Info & Control -->
    <div class="row center-text" style="height: 40%;">
      <div class="col" ng-repeat="team in game.teams">
        <h5 style="display: inline;">{{team.name}}</h5>
        <i class="fa fa-edit" ng-click="editTeamName($index)" class="btn btn-link"></i>
        <h6>{{team.score}}</h6>
        <div class="row">
          <div class="col">
            <button type="button" ng-click="scoreChange($index, -1)" class="btn btn-primary fill-height fill-width">Score -1</button>
          </div>
          <div class="col">
            <button type="button" ng-click="scoreChange($index, 1)" class="btn btn-primary fill-height fill-width">Score +1</button>
          </div>
        </div>
      </div>
    </div>

示例游戏对象：

{
  gameRunning: false,
  shotClockTime: defaultFullShotClock, //Value changing 10 times per second other values may change too but not as frequently
  oldShotClockValue: defaultFullShotClock,
  teams: [{
    name: "White",
    score: 0
  }, {
    name: "Blue",
    score: 0
  }],
  inOvertime: false,
  currentPeriod: 0,
  periods: {
    mainGame: generateMainGame(defaultPeriodTime, defaultBreakTime, defaultHalfTime),
    overtime: generateOverTime(defaultOverTimePeriodTime, defaultBreakTime)
  }
}

我认为问题出在哪里 当游戏对象更改时，即使没有对团队数组本身进行任何更改，团队显示的HTML也会更新（$$！）。问题是，鼠标按下然后鼠标上升事件通常需要超过0.1秒的时间，这意味着它们不会发生在同一个按钮上，因此它们没有注册为单击，这意味着不调用ng单击

$$！（我认为这是因为在inspect元素中，该部分闪烁紫色。此外，当鼠标悬停在按钮上方时，按钮颜色在悬停和默认颜色之间快速交替。）

可能的解决方案

让angular js意识到什么都没有改变，因此它不会改变HTML，这意味着一切都会好起来（IDK如何做到这一点，但如果你这样做，这可能是一个解决方案）

让按钮保持不变，因为它们永远不会因团队数组的不同而改变（除非它变得更大，意味着它们的数量更多）

不要使用ng repeat复制并粘贴代码，因为应该始终有两个团队（这是最后的解决方案，因为我可能需要在将来添加更多团队及其“坏”代码）

---

在ng repeat中使用track by子句，如：

<div class="col" ng-repeat="team in game.teams track by $index">

TrackBy是一个有用的子句，它可以做一些事情，但其中之一是它可以跟踪列表中的项目，以便知道哪些项目需要重新提交，哪些项目已经存在。但是，如果这些项来自数据库且具有唯一标识符，则实际上最好将该属性用作跟踪器，而不是索引，因为它的性能更好，并且允许重新排序：

<div class="col" ng-repeat="team in game.teams track by team.id">

文件：

---

在ng repeat中使用track by子句，如：

<div class="col" ng-repeat="team in game.teams track by $index">

TrackBy是一个有用的子句，它可以做一些事情，但其中之一是它可以跟踪列表中的项目，以便知道哪些项目需要重新提交，哪些项目已经存在。但是，如果这些项来自数据库且具有唯一标识符，则实际上最好将该属性用作跟踪器，而不是索引，因为它的性能更好，并且允许重新排序：

<div class="col" ng-repeat="team in game.teams track by team.id">

文件：

---

即使它不能解决您的问题，您也应该只在发生变化时更新$scope道具。因此，在将道具分配给作用域属性之前，您可以比较道具。如果您可以发布控制器代码，以便我们查看数据是如何更新的，以及为什么每秒更新10次？您是否尝试在ng repeat中使用track by？@GoorLavi我必须更新属性，因为团队是一个数组，是更大对象（游戏）的一部分其中另一部分changed@DaMightyMouse我对这篇文章进行了编辑以回答你的问题7如果它不能解决你的问题，你应该只在发生变化时更新$scope道具。因此，在将道具分配给作用域属性之前，您可以比较道具。如果您可以发布控制器代码，以便我们查看数据是如何更新的，以及为什么每秒更新10次？您是否尝试在ng repeat中使用track by？@GoorLavi我必须更新属性，因为团队是一个数组，是更大对象（游戏）的一部分其中另一部分changed@DaMightyMouse我编辑了这篇文章来回答你的问题