输入的 ng-model 和 ng-change 都会改变 $scope 状态——哪个优先

Question

我有以下对象数组

$scope.client.systemAssessments = [
    {
        id: 0,
        name: 'Name 1',
        paused: false
    },
    {
        id: 1,
        name: 'Name 2',
        paused: false
    },
]

然后我为每个评估渲染一些 HTML：

<div ng-repeat="systemAssessment in client.systemAssessments">
    <span class="switch">
        <input ng-model="systemAssessment.paused" name="{{systemAssessment.name}}" ng-change="onPauseResumeAssessmentHandler(systemAssessment)" type="checkbox" toggle-btn on-type="success">
    </span>
</div>

我的 ng-change 函数如下所示：

  $scope.onPauseResumeAssessmentHandler = function onPauseResumeAssessmentHandler(systemAssessment) {
    //const { id, paused } = systemAssessment;
    //const clientId = $scope.client.clientId;
    console.log(systemAssignedAssessment);

    try {
      throw new Error('ERROR');
      //AssessmentsService.pauseResumeAssessment(clientId ,id, !paused);
    } catch (error) {
      $scope.client.systemAssessments[0].paused = false;
      console.log($scope.client.systemAssessments);
    }
  };

现在，由于我的输入复选框绑定到 pausedAssessment.paused，如果我选中它，暂停的属性变为 true 并且复选框被选中，但是，我只希望它在 AssessmentsService.pauseResumeAssessment(clientId ,id, !paused); 不会失败，因为它是一个 POST 请求。

例如，如果未选中该复选框而我单击了它，我希望它仅检查 POST 请求是否通过，并让它保持未选中状态，或者在POST请求失败。

正如您在我的代码片段中看到的那样，我尝试使用 try-catch 块，然后在 POST 请求抛出错误时取消选中第一个复选框，但是，当我记录 $scope.client.systemAssessments 在catch中，它显示第一个评估的暂停属性仍然设置为true，尽管你可以看到我将它设置为false。

我假设这是因为 ng-model 和 ng-change 之间的奇怪交互（可能 ng-model 覆盖了我在 ng-change 中所做的更改）

Answer 1

做正确的事。当未选中的复选框被点击时，它会被选中——不要反对它。但是勾选后，你可以取消勾选：

... ng-change:
if (smth.paused) {
    try {
      throw new Error('ERROR');
    } catch (error) {
      $timeout(() => { // Can not and should not be done immediately
          smth.paused = false;
      })
    }
}

输入的 ng-model 和 ng-change 都会改变 $scope 状态——哪个优先

Both ng-model and ng-change on input alter the $scope state - which one takes priority

javascript

angularjs