ngModelController $modelValue is empty on directive startup

Question

I have an attribute directive that I use on an input=text tag like this:

<input type="text" ng-model="helo" my-directive />

On my directive I'm trying to use the ngModelController to save the initial value of my input, in this case the value of the ng-model associated with it.

The directive is like this:

app.directive('myDirective', function () {
   return {
            restrict: "A",
            scope: {

            },
            require: "ngModel",
            link: function (scope, elm, attr, ngModel) {
              console.log("hi");
              console.log(ngModel.$modelValue);
              console.log(ngModel.$viewValue);
              console.log(elm.val());
            }
   }
});

The problem is that ngModel.$modelValue is empty maybe because at the time the directive is initialized the ngModel wasn't yet updated with the correct value. So, how can I store on my directive the first value that is set on my input field?

How to correctly access ngModel.$modelValue so that it has the correct value?

I'll also appreciate an explanation on why this isn't working as I'm not clearly understanding this from reading the docs.

Plunkr full example: http://plnkr.co/edit/QgRieF

Nitish Kumar Nitish Kumar · Accepted Answer · 2014-09-25T04:11:34

Use $watch in myDirective

 app.directive('myDirective', function () {
    return {
        restrict: "A",
        scope: {
            
        },
        require: "ngModel",
        link: function (scope, elm, attr, ngModel) {
          
          var unwatch = scope.$watch(function(){
            return ngModel.$viewValue;
          }, function(value){
            if(value){
              console.log("hi");
              console.log(ngModel.$modelValue);
              console.log(ngModel.$viewValue);
              console.log(elm.val());
              unwatch(); 
            } 
          });
          
        }
     }
 });

For Demo See This Link

ngModelController $modelValue is empty on directive startup

1 Answers