带有错误消息的自定义验证器的 angularjs 指令答案

【问题标题】：angularjs directive for custom validator with error messages带有错误消息的自定义验证器的 angularjs 指令
【发布时间】：2018-04-11 20:50:06
【问题描述】：

我希望能够将自定义验证器的字典以及可能的错误消息传递给 angular 指令，以便在相应的验证器返回 false 时呈现适当的错误消息。

这里有一些代码：

base.js：

function not_bob(value) {
  return value != "bob";
}

function not_alice(value) {
  return value != "alice";
}

app.js：

(function() {
    var app = angular.module("my_app");
    app.controller("MyController", [ "$scope", function($scope) {
        var my_controller = this;
        my_controller.person = {
          "first_name": "fred",
          "last_name": "jones"
        }
        my_controller.validators = {
            "first_name" : [
                {
                    "name": "validatebob",
                    "fn": not_bob,
                    "msg": "bob is not allowed"
                },
                {
                    "name": "validatealice",
                    "fn": not_alice,
                    "msg": "alice is not allowed"
                }
            ]
        };

    }]);
    app.directive('myvalidators', ['$compile', function($compile) {
        return {
            require: ['^form', 'ngModel'],
            scope: {
                validators: '=myvalidators'
            },
            link: function(scope, elm, attrs, ctrls) {
                var form = ctrls[0];
                var ctrl = ctrls[1];
                var parent = elm.parent();
                $.each(scope.validators, function(i, validator) {
                    ctrl.$validators[validator.name] = function(modelValue, viewValue) {
                        return validator.fn(viewValue);
                    };
                    var error_class = [form.$name, ctrl.$name, "$error", validator.name].join(".");
                    var error_content = "<div ng-show='" + error_class + "'>" + validator.msg + "</div>"
                    var compiled_error_content = $compile(error_content)(scope)
                    parent.append(compiled_error_content);
                });
            }
        };
    }]);
})();

template.html：

  <html>
      <script type="text/javascript" src="base.js"></script>
      <script type="text/javascript" src="app.js"></script>
      <div ng-app="my_app">
        <div ng-controller="MyController as my_controller">
          <form name="person_form" novalidate>
            <input type="text" class="form-control" name="first_name" id="id_first_name" ng-model="my_controller.person.first_name" myvalidators="my_controller.validators['first_name']">
          </form>
        </div> 
      </div>
    </html>

这看起来很复杂（这是一个人为的例子），但它主要是有效的；我将一个数组作为参数传递给指令。数组的每个元素都是一个 JSON 对象，带有一个“名称”告诉我验证器的名称，一个“fn”告诉我要运行什么函数来执行验证，一个“msg”告诉我如果该函数显示什么返回假。

果然，当我键入“bob”或“alice”时，该指令导致输入无效，并添加了以下兄弟元素：

<div ng-show="person_form.first_name.$error.validatebob">bob is not allowed</div>
<div ng-show="person_form.first_name.$error.validatealice">alice is not allowed</div>

但是，那些元素从不出现。

有趣的是，如果我只是手动将这些元素添加到模板中（即：不使用指令），那么当相应的验证器返回 false 时会出现正确的消息。

关于我做错了什么有什么想法吗？

谢谢

编辑：我很确定这是与范围有关的事情；也许控制器中的“person_form”对象在指令中不可用？

【问题讨论】：

标签： javascript jquery angularjs validation

【解决方案1】：

啊哈！正如怀疑的那样，问题出在范围上。

表单在我的控制器范围内，而不是在我的指令的隔离范围内。从这里更改指令中的行：

var compiled_error_content = $compile(error_content)(scope)

到这里：

var compiled_error_content = $compile(error_content)(scope.$parent)

成功了。

【讨论】：