get the value of input text in a directive (ANGULAR.JS)

Question

Hi. this is my code. I need get the value of the input text, but I only can get the value, when the value on the input text ischanged. How can get the value of the input text without need change.(get initially the value of the input text)

I want to do something very generic, that I can reuse it in any controller. Have a certain number of fields and validate them, so I do not want to always get the value of the variable "number".

I want to reuse this directive on any controller. I will not always have the $ scope.numero variable. How can I get the value of the text field without typing scope.numero in the directive?

  var app = angular.module('app', []);

  app.controller('appCtrl', function ($scope) {
  $scope.numero=100500
  });

  app.directive('validate', function () {

      return {
          restrict: 'AE',
          require: 'ngModel', 

          link: function (scope, element, attrs, ngModel) {
            if (!ngModel){
              return;          
            }

            ngModel.$parsers.push(function(val){
              if ((val>10) && (val<20)){
                element.removeClass("wrong"); 
                element.addClass("correct"); 
              } else {
                element.removeClass("correct");
                element.addClass("wrong"); 
              }
              ngModel.$render();
            })


          }
      };
  });

you want to get the value of numero in your directive, when you are initializing it? — Pramod_Para
– Pramod_Para, Commented Mar 22, 2017 at 14:05
@Pramod_Para yes, i need this value but in the directive for check the validation to assign error | correct class — yavg
– yavg, Commented Mar 22, 2017 at 14:08
@Pramod_Para I want to do something very generic, that I can reuse it in any controller. Have a certain number of fields and validate them, so I do not want to always get the value of the variable "number" — yavg
– yavg, Commented Mar 22, 2017 at 14:18
Did you try setting an attribute and getting value in directive? — Pramod_Para
– Pramod_Para, Commented Mar 22, 2017 at 14:19

Daniel Beck · Accepted Answer · 2017-03-22 14:35:51Z

2

The data you need is already inside the ngModel, so you can retrieve it with ngModel.$modelValue.

(In general, when using Angular it's best to get out of the habit of reading data from the DOM -- the DOM is a side effect representation of the scope data; there's no need for the directive to "read the data from the input field" because the input field was filled using data already in the directive in the first place!)

answered Mar 22, 2017 at 14:35

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

2 Comments

yavg Over a year ago

thanks man, but the result of ngModel.$modelValue is NaN.. jsfiddle.net/0tsvue0L

Daniel Beck Over a year ago

You're trying to access the data before it's reached the directive. Wrap that alert in a $timeout (to force it to wait until the next $digest) and you'll see the correct value: jsfiddle.net/tL4b13o6

Collectives™ on Stack Overflow

get the value of input text in a directive (ANGULAR.JS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related