我正在创建一个指令,将带有文本类型输入的模板添加到 View 中。在此指令中,如果文本字段输入超过提供的最大长度设置,我尝试添加用于错误通知的跨度类。我有一个类似这样的代码:
<div ng-app="app">
<form name="userForm" ng-submit="processForm()" novalidate>
<div use-text-box name="xyz" ng-maxlength="10" required> </div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
我的指令是这样的:
var app = angular.module('app', []);
app.directive('useTextBox', function() {
return {
replace:true,
compile: function(element,attrs) {
var name = attrs.name;
var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">Text is too long. The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';
var htmlText = '<input type="text" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" required />' +
maxLengthError;
element.replaceWith(htmlText);
}
};
});
但是在上面的代码中,指令正在生成输入文本字段等......没有问题。但是,如果最大长度超过 10,它不会显示错误消息。我做错了什么?
以下是上述示例的 jsfiddle 链接:http://jsfiddle.net/fB45J/3/
最佳答案
我不知道您是否只是在学习并尝试理解指令,但您甚至不需要指令来完成您想要的任务。
这是一个没有指令的 fiddle :http://jsfiddle.net/mikeeconroy/fB45J/7/
<div ng-app="app">
<ng-form name="userForm" novalidate role="form" ng-controller="myFormCtrl">
<div>
<p class="text-muted">Enter in some text then remove it. You need to make it such that Angular sees the form as "dirty" and then tries validate the form.</p><br>
</div>
<div>
<input type="text" name="xyz" ng-model="xyz" maxlength="10" required>
<span ng-show="userForm.xyz.$dirty && userForm.xyz.$error.required && userForm.xyz.$invalid" style="color: #900;">This field is required!</span>
</div>
<br /> <br />
<button type="button" ng-click="processForm()" class="btn btn-success">Submit</button>
</ng-form>
</div>
这是 Angular 。它没有做任何事情,只是显示表单元素上的“$dirty”是如何工作的。
var app = angular.module('app', []);
app.controller('myFormCtrl',function($scope,$element){
$scope.form = $element.controller('form');
$scope.processForm = function(){
// set form to dirty
$scope.form.xyz.$dirty = true;
console.log('Processing!');
};
});
编辑:这是使用指令方法的修复
http://jsfiddle.net/mikeeconroy/fB45J/8/
app.directive('useTextBox', function($compile,$timeout) {
return {
replace:true,
scope: false,
link: function(scope,element,attrs) {
var name = attrs.name;
var maxLengthError = attrs.hasOwnProperty('ngMaxlength') ? '<span ng-show="userForm.' + attrs.name + '.$error.maxlength" class="help-block">The limit is ' + attrs.ngMaxlength + ' characters.</span>' : '';
var htmlText = '<div><input type="text" id="' + name + '" name="' + name + '" ng-maxlength="' + attrs.ngMaxlength + '" ng-model="test_' + attrs.name + '" required>' + maxLengthError + '</div>';
$compile(htmlText)(scope,function(_element,_scope){
element.replaceWith(_element);
});
} // end link
};
});
您需要将 $compile
注入(inject)您的指令中,然后使用它来编译您的 HTML 并将其插入到正确的范围内。 _element
将是编译后的新元素。
$compile(htmlText)(scope,function(_element,_scope){
element.replaceWith(_element);
});
编辑:这是仅使用指令的 compile
属性的另一个示例
http://jsfiddle.net/mikeeconroy/dzP9L/1/
我想你的示例和这个示例之间的区别似乎是表单 Controller 的引入。
关于angularjs - 无法在指令中获得 $error.maxlength 验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22609055/