How to use an ngModel with a custom directive in AngularJS

Question

My Directive:

(function () {
  'use strict';

  wikiApp.directive('jzInput', ['$sce', function ($sce) {
    var html = [
      '<input type="text" ng-change="validate()" />'
    ];

    var addSeparator = function (input, sep) {
      return (input + '').replace(/(\d)(?=(\d{3})+$)/g, '$1' + sep);
    };

    var digitsOnly = function (input) {
      return (input.toString()).replace(/[^\d]/g, "");
    };

    var parseInteger = function(input) {
      return addSeparator(digitsOnly(input), ',');
    };

    return {
      restrict: 'E',
      template: html.join(''),
      replace: true,
      require: 'ngModel',
      scope: {
        type: '@'
      },
      link: function($scope, $element, $attr, ngModel) {

      ngModel.$parsers.push(function(value){
        var input = value;
        var output = input;

        // Integer
        output = parseInteger(input);

        console.log(output);
        return output;
      });

      }
    };
  }]);
})();

My HTML:

<jz-input type="text" ng-model="test">
<input type="text" ng-model="test">

The input has the updated value from my validate function, my jzInput directive does not. How do I manually update the value of the ngModel from within my directive and have it reflected properly?

Example:

Plunker. Type into the top input, both numbers and letters. Note that letters show up, a nice formatted number does not. In the input below, using the same model variable, is showing the correct, expected value. How do I get my jz-input to show the correct, expected value for the model?

Mobin Skariya · Accepted Answer · 2014-03-16 06:24:21Z

1

I hope this is what you expect from the directive. Just made some changes to your code.

 module.directive('jzInput', [function () {
var html = [
  '<input type="text" />'
];

var addSeparator = function (input, sep) {
  return (input + '').replace(/(\d)(?=(\d{3})+$)/g, '$1' + sep);
};

var digitsOnly = function (input) {
  return (input.toString()).replace(/[^\d]/g, "");
};

var parseInteger = function(input) {
  return addSeparator(digitsOnly(input), ',');
};

return {
  restrict: 'E',
  template: html.join(''),
  replace: true,
  require: 'ngModel',
  scope: {
    test: '=ngModel'
  },
  link: function(scope, element, attr) {

scope.$watch('test',function(newVal){

    if(newVal != undefined) {
        scope.test = parseInteger(newVal);
    }
});

  }
};
  }]);

edited Mar 16, 2014 at 6:24

answered Mar 15, 2014 at 8:19

Mobin Skariya

3923 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justin808 Over a year ago

Hi, You're watching scope.test. The issue is that I don't know if the model is test or not. The user of the directive can pass whatever they like in as the model.

Mobin Skariya Over a year ago

I guess i have misinterpreted your requirement. But in the above code I am watching test which is binded with ng-model. Please find the demo plnkr.co/edit/8PbgvnUVF6rLhbqJb0HN?p=preview

aet Over a year ago

@Justin808 the "test" in this example is completely arbitrary. If it were scope: { linkedModel: '=ngModel' } scope.$watch('linkedModel', function(newVal) { is that more clear?

Khanh TO · Accepted Answer · 2014-03-15 09:03:45Z

0

The correct way to implement validation with ngModel is adding a function to its parsers collection.

ngModel.$parsers.push(function(value){
     var input = value;
     var output = input;

     // Integer
     output = parseInteger(input);
     console.log(output);
     return output;
});

I have also made some changes to your code:

Use the directive as an attribute instead of an element: restrict: 'A'
Change function ($sce) { to ['$sce',function ($sce) {

DEMO

answered Mar 15, 2014 at 9:03

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

3 Comments

Justin808 Over a year ago

Hi, I tried your code but it's not working. I've added a Plunker demo so you can see whats going on.

Khanh TO Over a year ago

@Justin808: the returned value (return output;) from parser is the value set to your underlying model. Maybe I don't understand your requirement completely, but you could change the function to return the value you want and return undefined if the input value is not valid.

Khanh TO Over a year ago

@Justin808: What is not working? I have tried to read question again but I still don't understand your requirement. Could you explain in more detail? In this code, the parseInteger(input); strips all the letters from input and return that value which is set to your ngModel underlying property. (expected behavior)

Collectives™ on Stack Overflow

How to use an ngModel with a custom directive in AngularJS

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related