Angularjs custom directive getting viewValue as undefined

Question

I am a beginner in Angularjs, so please correct me if I am wrong in understanding.

Firstly, below is my code. What I am trying is to create a custom directive for input validation.

For example:

<input drtooltip-message type="text"  ng-minlegth="3"> //if the length of the input value is less than 3 a tooltip with custom message should be shown
<input drtooltip-message type="text"  ng-maxlegth="5">////if the length of the input value is greater than 5 a tooltip with custom message should be shown

Html

<div ng-app="validationApp" ng-controller="mainController">
  <input drtooltip-message type="text" name="name" class="form-control" ng-model="user.name" required  tooltip="Tooltip on left" tooltip-placement="top"  ng-minlength="5" ng-maxlength="8" >
</div>

Js

var validationApp = angular.module('validationApp', ['ui.bootstrap']);

validationApp.controller('mainController', function($scope) {

});

validationApp.directive('drtooltipMessage', function () {
        return {
            restrict: 'A',
            template: '<input tooltip tooltip-placement="top" >',
            replace: true,
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                ctrl.$parsers.push(function (viewValue) {
                    alert(viewValue);//always getting 'undefined'
                }
            }
        };
});

I am expecting the value entered in the input box as alert value, but am getting 'undefined'.

Reference: What's the difference between ngModel.$modelValue and ngModel.$viewValue

Answer 1

Your directive template create input type and you are using this directive in another input type text. You cannot use input inside input.

The directive you created should be used in div or in other placeholder. as shown below. The other attribute for the directive should be define inside the template.

<div drtooltip-message>

Answer 2

You can locally get the data in your directive using scope.ngModel though I will give you a much better approach on implementing your solution.

Your html would probably look like this and just add your respective attributes.

<input type="text" your-custom-text-field ng-model="textValue" ng-tooltip-max="5">

Then your directive would look like this

validationApp.directive('yourCustomTextfield', function () {
        return {
            restrict: 'A',
            template: '<input type="text" ng-model="model" ng-change="onChange()">',
            replace: true,
            require: 'ngModel',
            scope: {
                'ngToolTipMax': '=',
                'ngModel': '='
            },
            link: function (scope, element, attrs) {
                scope.onChange = function () {
                    // Your code goes here

                    // Update ng-model
                    scope.ngModel = scope.model;
                };   
            }
        };
});

Hope that helps