ng-change触发后角ng类不更新

Question

编辑：似乎我的问题比下面代码中的简单拼写错误更复杂。我有 3rd 方组件在输入上交互并引发更改事件，当我不希望它时，angular 正在拾取这些事件。问题出在那里的某个地方。我将尝试找到一个简单的小提琴，并在管理它时更新问题。

我有一对输入，它们有一个 ng 模型并共享一个 ng-change 函数。ng-change 在控制器中设置一个布尔值，该值应该通过 ng 类指令更新输入上的类。但是，两个输入中的第一个似乎从未对其类进行任何更新。这是一个简化版本：

视图：

<div ng-controller='TestCtrl'>
    <input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>      
    <input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>

控制器：

function TestCtrl($scope) {
  $scope.firstInvalid = false;
  $scope.secondInvalid = false;
  $scope.firstValue = '';
  $scope.secondValue = '';
  $scope.doOnChange = function () {
      console.log('change fired');
      $scope.firstInValid = !$scope.firstInvalid;
      $scope.secondInvalid = !$scope.secondInvalid;
  };
};

代码笔：http://codepen.io/Samih/pen/ZGXQPJ

请注意输入任一输入，

第二个输入如何更新类，正如我所期望的那样，但是第一个输入永远不会获得"无效"类。

提前感谢您的帮助。

Answer 1

检查代码是否有拼写错误：

此行

 $scope.firstInValid = !$scope.firstInvalid;

应该是

 $scope.firstInvalid = !$scope.firstInvalid;

它应该是$scope.firstInvalid的，而不是$scope.firstInValid的。

Answer 2

它似乎对我有用：刚刚编辑了"第一个无效"。

视图：

<div ng-controller='TestCtrl'>
    <input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>      
    <input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>

控制器：

function TestCtrl($scope) {
  $scope.firstInvalid = false;
  $scope.secondInvalid = false;
  $scope.firstValue = '';
  $scope.secondValue = '';
  $scope.doOnChange = function () {
      console.log('change fired');
      $scope.firstInvalid = !$scope.firstInvalid;
      $scope.secondInvalid = !$scope.secondInvalid;
  };
};

代码笔：http://codepen.io/vikashverma/pen/BNwKmQ