指令代码如下:
var regex = /[\u4e00-\u9fa5\u3400-\u4db5\ue000-\uf8ff]/;
app.directive("ifHanzi", function () {
return {
restrict: "A",
scope:true,
require: "ngModel",
link: function (scope, ele, attrs, ngModelController) {
ngModelController.$parsers.unshift(function (input) {
if (regex.test(input)) {
ngModelController.$setValidity('ifHanzi', true);
} else {
ngModelController.$setValidity('ifHanzi', false);
}
});
}
}
});
html代码如下:
<form name="iForm" ng-submit="Search(Input)">
<p class="input-group">
<input type="text" class="form-control" ng-model="Input" name="inputText" if-hanzi>
<button class="btn btn-primary" type="submit>查询</button>
</p>
<span ng-show="iForm.inputText.$error.ifHanzi">提示:只能输入汉字进行查询!</span>
</form>
控制器代码:
app.controller('testCtrl',['$scope',function($scope){
$scope.Search=function(Input){
console.log(Input);//使用了表单验证指令后,Input就成了undefined
}
}]);
验证是可以正常执行的,就是只要添加了自己写的这个“ifHanzi”指令,表单的提交内容在控制器中就拿不到,成了undefined,是我的指令写错了还是有其他没有注意到的地方,希望同学们指点一下,谢谢啦。
コマンドのscope = trueを削除するだけです。独立したスコープを使用しているため、携帯電話を使用する必要があります。
更新日: 2015-12-13
1. まず、
リーリーrequire
的是一个指令,即ngModel
,而这个指令是没有隔离作用域的,如果你设置scope = true
,那么就会导致内部ngModel
无法更新外部ngModel
的对应值。这个是导致上面问题的重点。所以去掉这个配置选项就可以了。2.你给
ngModel.$parsers
传递的函数方法,在验证了ifHanzi
が結果を返さなかったため、ビューの値がモデルに渡されませんでした。次のように変更できます:これが問題の 2 番目の理由です 。
お役に立てれば幸いです。