javascript - AngularJS:条件 ng 类，其函数触发荒谬的金额

Question

I checked similar Q&As but they didn't fix my issue.

我想动态设置输入的类，请考虑以下 Plunkr .

如您所见，我有一个字段，定义如下:

<input type="text" ng-model="Person.Name" ng-class="{'mandatory': IsFieldMandatory('Name')}" />

该函数具有以下代码:

self.IsFieldMandatory = function(field){
  var isMandatory = true;

  var value = $scope.Person.Name;

  $scope.Cnt = $scope.Cnt + 1;

  return value.length == 0;
}

如您所见，它在页面加载(或任何进一步的操作，如模糊)时触发 11(!) 次。

PS:该功能不起作用，因为我收到此错误:

Error: $rootScope:infdig Infinite $digest Loop

这是由于 $scope.Cnt 增量而发生的。如果放在评论中，它会起作用(但我不知道触发器的数量)。

PPS:

我该如何使用它？:

var value = $parse('Person.' + field);

那会更好，因为这样该函数就适用于任何领域。在现实世界的场景中，它需要这样做。 (这返回一个函数，而不是实际值)

谢谢!

更新

Plunkr 示例似乎没有值(value)，因此改为原始函数:

self.IsMandatory = function (field) {

    console.log('test');

    if (self.IsMandatoryFieldsLoaded == true) {
        var idxAsync = self.MandatoryFields.indexOf(field);
        return idxAsync > -1;
    }

    return false;
}

正如你所看到的，我没有做任何修改，只是阅读。我有 11 个字段，但这个函数的“测试”日志记录被写入了 198 次!

Answer 1

您可以简单地检查输入中是否输入了任何内容，如下所示:

<input type="text" ng-model="Person.Name" ng-class="{'mandatory': !Person.Name.length}" />

这样你就可以消除错误。由于您正在更新函数中的 Cnt $scope 变量，因此摘要循环会一遍又一遍地触发。这导致了无限循环(您看到的错误)。

通过简单地检查 Person.Name 是否有长度，您可以避免声明新函数和其他不必要的逻辑。它简单且干净得多。

希望这有帮助。

使用 ngForms 更新:

您可以声明一个指令来验证您的输入，如下所示:

app.directive('validate', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelCtrl) {
      scope.$watch('Person.Name', function(newValue) {
        ngModelCtrl.$setValidity('notEmpty', isEmpty(newValue))
      });
    }
  }
});

function isEmpty(string) {
  return !!string.length;
}

并在您的输入中使用它

<input type="text" validate ng-model="Person.Name"/>

在你的 CSS 中你将会有

input.ng-invalid {
  border: 2px solid red;
}

现在您可以关心有多少个复杂的验证函数，并且只需使用 $setValidity() 函数来告诉 Angular 该输入是否有效。如果您的其中一项验证结果为 false，那么 Angular 会通过添加 ng-invalid 类自动将您的输入变为红色。