Hi again!
I (very) simplified version of a small input directive I have written:
http://plnkr.co/edit/CVf7vJaSLaJkMyUrATbM?p=preview
Simple form with a custom input tag (my-tag):
<div my-tag=true type="email" name="email" data-ng-minlength=5
placeholder="E-mail address"></div>
<div data-ng-show='test.email.$dirty && test.email.$invalid'>
ERROR
</div>
and here is the directive (it simply iterates over all attributes of the
custom directive, adds them to the input tag and removes them from the
directive:
template: '<div><input /></div>',
compile: function(tElement, tAttrs) {
var tInput = tElement.find('input');
// PROBLEM2: working:
tInput.attr('data-ng-model', 'user.email');
// simply iterate over all custom directive attributes and move them
to the input tag
angular.forEach(tAttrs, function(value, key) {
if (key.charAt(0) != '$' && key.indexOf('s5') !== 0) {
var realKey = key;
if (key.indexOf('ng') === 0) {
realKey = 'data-ng-' + key.charAt(2).toLowerCase() + key.substr(
3);
}
console.log("moving attr", realKey, value);
tInput.attr(realKey, value);
tInput.parent().parent().removeAttr(realKey); // PROBLEM1: does
remove everything but 'placeholder' attribute
}
});
}
working like expected, (please ignore PROBLEM1, this problem only occurs on
my computer *lol*), however I had to hardcode the ngModel to make it work.
If I copy the ngModel like the other attributes (ng-min-length, ...) it
does not work (full plunk:
http://plnkr.co/edit/1wzEIC0AdXiVMmeZnyoH?p=preview):
HTML change (added the data-ng-model attribute):
<div my-tag=true data-ng-model="user.email" type="email" ...>
script-change: removed the
// PROBLEM2: working:
tInput.attr('data-ng-model', 'user.email');
as the model is copied together with the rest of the attributes.
The model value is shown in the input field, if valid the model value is
updated from the input field, hovever *in this case the ERROR (form
validation) is NOT triggering*.
My questions: Why and how to get around it? ;)
Thank you very much in advance!
Kind regards,
Anton Trapp
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
