javascript - 如何在 ngModel 值生效之前查看它？

Question

我有一个密码字段，旁边有一个passwordStrengthMeter 元素指令。我希望passwordStrengthMeter 能够观察密码字段的更改并实时更新——而不仅仅是在模糊时或密码字段的模型通过验证时进行更新。

我在密码字段上使用 Angular 验证，我发现我的指令在密码字段有效之前无法观察到密码字段的更改。我希望密码验证保持不变，但我也希望实时强度指示。我怎样才能做到这一点？这是我到目前为止所拥有的...

HTML:

<input class="control" type="password" name="password" placeholder="Password" ng-model="account.password"
       ng-minlength="8" ng-maxlength="15" ng-pattern="VALIDATION_PATTERNS.passwordStrength" required ng-focused />
<password-strength-meter password-field="account.password"></password-strength-meter>

指令:

angular.module('app.directives').directive('passwordStrengthMeter', function() {
    'use strict';

    return {
        restrict: 'E',
        replace: true,
        template: '<div class="password-strength-meter"></div>',
        link: function(scope, element, attrs) {
            // Map scores to CSS classes.
            var scoreClasses = {
                0: 'blank',
                1: 'weak',
                2: 'moderate',
                3: 'strong',
                4: 'very-strong'
            };

            var scorer = function() {
                // Get password value.
                var password = scope.$eval(attrs.passwordField);

                // Calculate a score.
                // TODO Replace this with an actual calculation.
                return password.length;
            }
            scope.$watch(scorer, function(score) {
                // Remove any score classes for the element.
                for (var i in scoreClasses) {
                    element.removeClass(scoreClasses[i]);
                }

                // Set class based on score.
                element.addClass(scoreClasses[score]);
            });
        }
    };
});

Answer 1

好像是这样设置

ng-model-options="{allowInvalid: true}"

密码输入字段可以解决该问题。

如果有人有替代或更好的解决方案，请随时发布。