CODEWITHSUNDEEP
javascripthtmlangularjs
Parshuram Kalvikatte
Parshuram Kalvikatte

Reputation: 1636

Changing the input after focus is removed from directive in angular js

I just want to change my input after the focus is removed from particular element (using directive only) I dont want to use ng-focus and ng-blur For eg - Here i want to change my text to uppercase when the focus is lost from textbox I have one textbox 

<input type = "text" ng-model = "text" upper>

Here upper is my directive

app.directive('upper', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                alert(text);
                var  transFormetInput = text;
                transFormetInput = transFormetInput.toUpperCase();
                 alert(transFormetInput);
                return transFormetInput;
            }
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

Now here my $parser will change my output on every word enter in model ie on every letter it will get fire I want to change the model after my scope has changed.

Here is my plunker

This plunker has two issues.

1)As i have used $parser here it is firing on every word enter which i dont want,i want it to fire when my focus is lost from my textbox.

2) my model is not changing from my directive.

Upvotes: 0

Views: 890

Answers (2)

Elmer Dantas
Elmer Dantas

Reputation: 4849

I try to save your plunker but I do not have permissions, so, just use like this.

app.directive('upper', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attr) {
      element.on('blur', function() {
        element[0].value = element[0].value.toUpperCase();
      });
    }
  };
});

here the plunker https://plnkr.co/edit/jMo9VCThgjrVVu5CY1sp?p=preview

Upvotes: 2

rrd
rrd

Reputation: 5957

If you want the blur, try something like this:

link: (scope, el, attr, ctrl) => {
  el.bind('blur', () => {
    el.val(ctrl.yourInput.value);
  });
}

Your value that you want should be on the controller/model (4th arg in link). I'd suggest assigning it to a variable everytime it is updated, which you can then access in the el.bind('blur') method.

Upvotes: 0

Related Questions