how to get ng-model value in directive

Question

I have written a directive in AngularJS, and used the input type number with min-max and ng-model attribute. I have used isolated scope. In the directive, I have written a blur event. I am getting min-max value but not getting ng-model value:

<input my-directive min="5" max="10" ng-model="num" type="number">

myApp.directive('myDirective', function () {
  function link($scope, ele, attr) {
    $scope.$watch('num', function (value) {
      console.log(value);
    })
    ele.on('blur', function () {
      console.log($scope.num, $scope.min, $scope.max);
    })
  }
  return {
    restrict : 'A',
    scope: {
      num: "=ngModel",
      min: "=?",
      max: "=?"
    },
    link: link
  }
});

output: undefined 5 10

What am I doing wrong?

Dan · Accepted Answer · 2020-04-05T10:11:05.237

1

Instead of using a binding to ngModel, require it and inject it into the link function:

myApp.directive('myDirective', function () {
  function link($scope, ele, attr, ngModel) { // <--- inject
    $scope.$watch(() => ngModel.$viewValue, (n, o) => {
      // watching `ngModel.$viewValue`
      console.log('WATCH', n, o);
    })
    ele.on('blur', function () {
      // `ngModel.$viewValue` is the current value
      console.log('BLUR', ngModel.$viewValue, $scope.min, $scope.max);
    })
  }
  return {
    require: 'ngModel', // <--- require 
    restrict : 'A',
    scope: {  // <--- remove `ngModel` binding from scope
      min: "=?",
      max: "=?"
    },
    link: link
  }
});

Here is a demo

edited Apr 05 '20 at 10:11

answered Apr 05 '20 at 10:04

Dan

59,490
13
101
110

Thank you its working, but can we do that with that way?? – Rohit Hushare Apr 05 '20 at 11:14
I have added code snippet below, its working with input type `text` but not getting in type number. could please explain with type `number` – Rohit Hushare Apr 05 '20 at 12:03
My demo uses input type="number". Click the demo link beneath the code in my answer, you will see that it works – Dan Apr 05 '20 at 12:06
yeah but, you have injected it, I want `ngModel` in isolated scope. just like my below answer. – Rohit Hushare Apr 05 '20 at 12:08
Impossible to do it as you've done it below. I don't understand-- what's the problem? – Dan Apr 05 '20 at 12:10
Thank you so much. below solution is working with both type `text` and `number` – Rohit Hushare Apr 05 '20 at 12:12
See the 2nd answer here for changing the model value -- https://stackoverflow.com/questions/18882428/angularjs-custom-directive-two-way-binding – Dan Apr 05 '20 at 12:26
`ngModel.$setViewValue(++counter); scope.$apply();` – Dan Apr 05 '20 at 12:26

how to get ng-model value in directive

1 Answers1