在AngularJS中,如何创建一个自定义验证指令,该指令采用$ scope变量并将其与ng-model的相等性进行比较？

Question

我正在寻找一个新的angular指令,用于将输入的ngmodel值与其他值进行比较,并检查它们是否相等.

如果它们相等,我希望此输入有效.否则,无效.

<div ng-repeat="one in many">
    <ng-form name="somethingToValidate">
        <input type="text" ng-model="one.userTypedText" 
               required mustbeequalto="one.someOtherValue" />
    </ng-form>
</div>

这是完成后使用的"mustbeequalto"指令的一个例子.
1)请注意{{one.someOtherValue}}可以随时更改,因此该指令必须了解此值的双向绑定特性.
2)我将在ng-repeat中使用它,因此它应该足够聪明,只能在包含它的特定ng-form的范围内工作.

我想我需要一个验证指令,但如果您认为有更好/更优雅的方式,请告知.我已经尝试创建这个指令并且失败了.

Answer 1

编写一个返回值的函数ng-model:

require: 'ngModel',
link: function(scope, element, attributes, ngModelController) {

  var getModelValue = function() {
  return ngModelController.$viewValue;
};

如上所示,您可以通过此检索ngModelController.$viewValue.该ngModelController可作为通过要求它在链接功能的第四个参数.

编写一个返回传递给must-be-equal-to属性的值的函数:

var getMustBeEqualToValue = function() {
  return scope.$eval(attributes.mustBeEqualTo);
};

您可以使用该$eval方法在当前作用域上执行表达式以获取正确的值.

编写一个设置有效性的函数:

var setValidity = function (isValid) {
  ngModelController.$setValidity('mustBeEqualTo', isValid);
};

用于每次$watch执行更改setValidity的值ng-model:

scope.$watch(getModelValue, function(newValue, oldValue) {
  if (newValue === oldValue) return;
  setValidity(newValue === getMustBeEqualToValue());
});

使用$watch执行setValidity每次的东西传递给值must-be-equal-to属性的变化:

scope.$watch(getMustBeEqualToValue, function(newValue, oldValue) {
  if (newValue === oldValue) return;
  setValidity(getModelValue() === newValue);
});

演示: http ://plnkr.co/edit/w9t0uk6l0HL0QYi40Cth？p =preview

有优化的空间,但这个例子应该是一个好的开始.