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

Avinash Jain · Accepted Answer · 2015-11-24 08:22:43Z

0

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>

answered Nov 24, 2015 at 8:22

Avinash Jain

7,6862 gold badges29 silver badges40 bronze badges

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

1 Comment

Soojoo Over a year ago

Please check my update in question. I am trying to use the directive as an attribute in an input field.

masterpreenz · Accepted Answer · 2015-12-03 09:32:09Z

0

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

edited Dec 3, 2015 at 9:32

answered Nov 24, 2015 at 9:38

masterpreenz

2,2881 gold badge14 silver badges21 bronze badges

1 Comment

Soojoo Over a year ago

Please check my update in question. I am trying to use the directive as an attribute in an input field.

Collectives™ on Stack Overflow

Angularjs custom directive getting viewValue as undefined

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related