Custom directive to assign property on element

Question

I used this snippet so I could see a "$touched" property on an input after it was blurred so I could do some validation, and it works great, but now I'm trying to make it work without overloading input and I've changed it to this:

.directive('blur', function () {
    return {
        restrict: 'E',
        require:  '?ngModel',
        replace: true,
        template: "<input />",
        link:     function postLinkFn($scope, $element, $attrs, ctrl) {
          if (!ctrl) { return; }

          ctrl.untouched = true;
          ctrl.touched   = false;

          $element.on('blur', function (){
            $scope.$apply(function () {
              ctrl.untouched = false;
              ctrl.touched   = true;
            });
          });
        }
    };
  });

Hoping to be able to use "myForm.email.touched", but that doesn't work. Is there something I'm doing wrong?

How do you intend to use this directive? because that template doesn't really go with its required attribute. — Josep, Oct 25 '14 at 15:49
Yes, the ng-model is in the blur tag. If I'm just replacing the input tag, that shouldn't matter should it? — m0ngr31, Oct 25 '14 at 15:56
Sorry, I didn't realize that you had `replace` set to true, yep, I guess that it should work fine, see @friedi answer. However, bare in mind that the `replace` is obsolete in Angular 1.3 — Josep, Oct 25 '14 at 16:05

friedi · Accepted Answer · 2014-10-25T16:38:12.700

2

Your code works fine.

Maybe your html code is somehow wrong.
Here is how I made it work:

<div ng-app="app">
    {{ myForm.email }}
    <form name="myForm">
        <blur type="email" ng-model="test" name="email" required></blur>
    </form>
</div>

DEMO

edited Oct 25 '14 at 16:38

answered Oct 25 '14 at 15:59

friedi

4,270
1
11
19

+1, but I wouldn't be surprised if the OP's problem is that he is using Angular 1.3, because the `replace` option is obsoleted in 1.3 and this directive wouldn't work without it. – Josep Oct 25 '14 at 16:08
It seems like it shows up there, but when I try something like this:
Must contain a valid email address
it doesn't work. – m0ngr31 Oct 25 '14 at 16:17
@Josep, I'm using 1.2.26. – m0ngr31 Oct 25 '14 at 16:21
1

@m0ngr31 it does work with the code that you just said in your last comment, [see here](http://jsfiddle.net/rpsx90bn/1/) – Josep Oct 25 '14 at 16:26
1

@m0ngr31 maybe what you are trying to do is **[this](http://jsfiddle.net/rpsx90bn/2/)** – Josep Oct 25 '14 at 16:29
@Josep, yeah, there is something wrong with the HTML (I'm guessing whatever is generated by the directive). It'll show up if I put it on top of the blur tag, but not below it. I just verified it's happening on my app too. Why would that be? – m0ngr31 Oct 25 '14 at 16:38
2

I updated the code. For some reason it works correctly with a closing `` tag. – friedi Oct 25 '14 at 16:38
1

@m0ngr31 right! the reason is that custom tags are not **[self-closing tags](http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5)**. Daahh! There are just a bunch of self-closing tags: `
` , ``, etc. But the tags of your custom directive elements are not. So when you use element directives, you should always close the directive tag. Shame on me for not seeing that before (although I almost never use element directive, I usually use attribute directives). – Josep Oct 25 '14 at 16:46
Thanks! Works great now. – m0ngr31 Oct 25 '14 at 16:47

Custom directive to assign property on element

1 Answers1