Question

我正在尝试编写类似于ngPattern的自定义AngularJS指令，但如果RegExp 不匹配，则该指令将无法通过验证。

在ngPattern指令的the source之后，我提出了：

  .directive("notPattern", function () {
    return {
      restrict: "A",
      require: "?ngModel",
      link: function (scope, elem, attr, ctrl) {
        if (!ctrl) return;

        var regExp, notPatternExp = attr.notPattern;
        attr.$observe("notPattern", function (regex) {
          if (angular.isString(regex) && regex.length > 0) {
            regex = new RegExp("^" + regex + "$");
          }

          if (regex && !regex.test) {
            var elemClone = angular.element(elem).clone();
            var elemHtml = angular.element("<div>").append(elemClone).html();
            throw new Error("Expected " + notPatternExp + " to be a RegExp but was " + regex + ". Element: " + elemHtml);
          }

          regExp = regex || undefined;
          ctrl.$validate();
        });

        ctrl.$validators.notpattern = function (value) {
          return ctrl.$isEmpty(value) || angular.isUndefined(regExp) || !regExp.test(value);
        };
      }
    };
  })

当我在属性中指定正则表达式源时，这是有效的，但我想允许直接使用RegExp对象，如ngPattern。

问题是表达式没有被评估。

这是JSFiddle的一个例子：
http://jsfiddle.net/8Lk3pqep/1/

在此示例中，输入＆＃34; abc＆＃34;以外的任何内容。进入文本字段将显示＆＃34;无效的＆＃39;模式＆＃39;！＆＃34;。我希望看到＆＃34;无效的＆＃39; notpattern＆＃39;！＆＃34;什么时候＆＃34; abc＆＃34;输入，但只有当我输入＆＃34; testRegExp＆＃34;时才会出现这种情况，从而表明没有评估属性值。

我做错了什么？

我知道notPattern可以通过类似的方式使用ngPattern完成：

$scope.testRegExp = {
  test: function (value) {
    return !/^abc$/.test(value);
  }
};

..但我想知道为什么自定义指令没有评估表达式。

Answer 1

事实证明，ngPattern是一个特殊情况，在一个＆＃34;别名输入attr＆＃34;的Angular中，这意味着设置一个监视来通过一个更高优先级的指令来评估表达式。手表监听器功能每次只需将属性设置为评估结果：
https://github.com/angular/angular.js/blob/bfcf9946e16d21b55dde50d4d21c71c898b10215/src/ng/directive/attrs.js#L377

要修复notPattern指令，而不是观察notPattern属性，请设置notPattern表达式的监视以镜像ngPattern属性的内置设置：

  .directive("notPattern", function () {
    return {
      restrict: "A",
      require: "?ngModel",
      link: function (scope, elem, attr, ctrl) {
        if (!ctrl) return;

        var regExp, notPatternExp = attr.notPattern;
        scope.$watch(notPatternExp, function (regex) {
          if (angular.isString(regex) && regex.length > 0) {
            regex = new RegExp("^" + regex + "$");
          }

          if (regex && !regex.test) {
            var elemClone = angular.element(elem).clone();
            var elemHtml = angular.element("<div>").append(elemClone).html();
            throw new Error("Expected " + notPatternExp + " to be a RegExp but was " + regex + ". Element: " + elemHtml);
          }

          regExp = regex || undefined;
          ctrl.$validate();
        });

        ctrl.$validators.notpattern = function (value) {
          return ctrl.$isEmpty(value) || angular.isUndefined(regExp) || !regExp.test(value);
        };
      }
    };
  })

这是一个更新的JSFiddle：
http://jsfiddle.net/8Lk3pqep/2/

自定义notPattern指令，如ngPattern，但检查RegExp是否不匹配

1 个答案: