如何使用angular向ng指令传递两个不同的变量

How to pass in two different variables to ng directive using angular?

本文关键字:两个 变量 angular 何使用 ng 指令      更新时间:2023-09-26

我试图创建一个密码验证指令,但我遇到了几个问题。这是一个jsfiddle链接

  1. 当我输入一个输入框时,另一个输入框自动更新,它不应该这样做
  2. 我不知道如何将第二个输入值传递给指令

这是我的html

<form name="sampleForm">
    <input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please provide password">
    <ul class="error-msgs" ng-messages="sampleForm.strongSecret.$error">
        <li ng-message="numberValidator">Strong secret has to contain at least 1 number</li>
        <li ng-message="uppercaseValidator">Strong secret has to contain at least 1 uppercase</li>
        <li ng-message="sixCharactersValidator">Strong secret has to exactly 6 characters long</li>
    </ul>
    <input name="strongSecret" type="text" ng-model="strongSecret" strong-secret required placeholder="Please confirm password">
    <ul class="error-msgs" ng-messages="sampleForm.strongSecret.$error">
        <li ng-message="numberValidator">Strong secret has to contain at least 1 number</li>
        <li ng-message="uppercaseValidator">Strong secret has to contain at least 1 uppercase</li>
        <li ng-message="sixCharactersValidator">Strong secret has to exactly 6 characters long</li>
    </ul>
</form>

这是我的js文件

angular.module('app', ['ngMessages']);
angular.module('app').directive('strongSecret', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
            function customValidator(ngModelValue, ngModelValue2) {
                // only ngModelValue returns
                console.log(ngModelValue);
                // this is undefined
                console.log(ngModelValue2);
                if (/[A-Z]/.test(ngModelValue)) {
                    ctrl.$setValidity('uppercaseValidator', true);
                } else {
                    ctrl.$setValidity('uppercaseValidator', false);
                }
                return ngModelValue;
            }
            ctrl.$parsers.push(customValidator);
        }
    };
});

customValidator运行时,第二个参数似乎永远不会填充。

谁能给我点提示解决这个问题?

感谢编辑:

我为第二个输入创建了一个新的验证器,但是现在我遇到了一组不同的问题(jsfiddle)

  1. 当我输入输入框1时,验证器不起作用
  2. 当我输入输入框2,两个验证器工作

我怀疑我没有在输入1和验证器1以及输入2和验证器2之间创建必要的绑定

您的两个文本输入都引用相同的模型,这就是为什么当您输入其中一个时它们都会更新。您应该尝试更改第二个的模型(和名称)属性为strongSecretConfirm或类似的东西。

您的验证器应该只在第一个字段上运行。您需要第二个验证器来验证strongSecretConfirm是否等于strongSecret。