javascript - AngularJS - 将 $setValidity 与 ng-repeat 指令一起使用

Question

我遇到了一些问题(主要是因为我对 AngularJS 指令缺乏了解)。我将 UI Bootstrap 库中的 Rating Directive 指令与我自己的自定义验证结合使用。多个评级指令实例是使用来 self 的 Controller 的对象数组的 ng-repeat 创建的。我使用其他范围变量来设置默认的“评价我”文本、自定义 CSS 类“ratingOptions.ratingStates”和最大值限制“ratingOptions.max”。一切都按预期工作...这是我在 View 中的指令代码(请注意容器形式称为“categoryRatingFrom”:

<div data-ng-repeat="cats in categories">
    <div data-ng-form name="RatingFrom">
        <div class="row no-bottom-padding">
            <label class="col-sm-4 control-label">@{{ cats.name }}</label>

            <div class="col-sm-8">

                <div class="no-outline"
                     data-rating
                     data-ng-model="cats.value"
                     data-max="ratingOptions.max"
                     data-rating-states="ratingOptions.ratingStates"
                     data-on-hover="cats.onHover(value)"
                     data-on-leave="cats.onLeave()"
                     data-rating-validate > <!-- Notice the custom directive -->
                </div>
                @{{ cats.hoverState || cats.items[cats.value - 1].name || rateMe }}
            </div>
        </div>
    </div>
</div>

现在，如果未设置值，我希望将指令实例设置为无效，默认值为零，但用户必须输入从 1 到 ratingOptions.max 的值(当前为 6 ).我有一个自定义指令来验证此调用 ratingValidate。这是被调用/引导的，我能够确定每个指令实例的当前值，但是我希望最初将指令/表单项设置为无效，一旦用户选择一个值，我们就设置指令/form-item/实例有效。这应该相当容易，但是使用 ng-repeat 我不确定如何引用特定的表单项。如果有人可以帮助解释我在试验和搜索 AngularJS 文档时需要做什么，我将不胜感激。这是我的指令...

angular.module('myApp')
    .directive('ratingValidate', function () {

       // ratingValidate
        return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController
            link: function (scope, element, attrs, ngModel) {

                // do nothing if no ng-model
                if (!ngModel) {
                    return;
                }

                // Listen for change events to enable binding
                element.bind('click change', function () {

                    console.log(element[0], attrs);
                    if(attrs.ariaValuenow === 0){
                        ngModel.$setValidity('', false); // What goes here??? How do I reference the item?
                    } else {
                        ngModel.$setValidity('', false); // What goes here??? How do I reference the item?
                    }

                });

            }
        };
    })
;

Answer 1

Angular 验证的工作原理

Angular 使用 'name' 属性创建用于验证的 $scope 变量。

例如，如果您有一个带有“必填”属性的输入字段:

<form name="myform">
   <input name="firstname" ng-model="firstname" type="text" required/>
</form> 

然后要访问 $scope 上的验证属性，您可以这样做:

var validationFailed = $scope.myform.firstname.$error.required;

其中 $error 是一个具有 bool 属性“required”的对象。

在 'required' 指令中，您会看到类似这样的内容:

                if(attrs.value == ''){
                    ngModel.$setValidity('required', true); // failed validation
                } else {
                    ngModel.$setValidity('required', false); // passed validation
                }

您可以将任何字符串传递给 $setValidity，它会为您设置 $error 属性。例如，如果您这样做了:

$setValidity('test', true)

然后会有一个名为“test”的 $error 属性，它会被设置为 true。然后，您可以像这样访问该属性:

$scope.myform.firstname.$error.test

其他可用的验证属性是:

$scope.myform.firstname.$valid
$scope.myform.firstname.$invalid
$scope.myform.firstname.$pristine
$scope.myform.$valid
$scope.myform.$invalid
$scope.myform.$pristine

希望这有助于回答您的问题。