带有错误消息的自定义验证器的 angularjs 指令
Posted
技术标签:
【中文标题】带有错误消息的自定义验证器的 angularjs 指令【英文标题】：angularjs directive for custom validator with error messages 【发布时间】：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”对象在指令中不可用？
【问题讨论】：
【参考方案1】：啊哈！正如怀疑的那样，问题出在范围上。
表单在我的控制器范围内，而不是在我的指令的隔离范围内。从这里更改指令中的行：
var compiled_error_content = $compile(error_content)(scope)
到这里：
var compiled_error_content = $compile(error_content)(scope.$parent)
成功了。
【讨论】：
以上是关于带有错误消息的自定义验证器的 angularjs 指令的主要内容，如果未能解决你的问题，请参考以下文章
带有 HTTPStatusCodeResult 和 jQuery 的自定义错误消息
如何根据 Angular 2 中的自定义验证规则显示错误消息？