Пользовательская директива Angularjs получение viewValue as undefined

Question

Я новичок в Angularjs, поэтому, пожалуйста, исправьте меня, если я ошибаюсь в понимании.

Во-первых, ниже мой код. Я пытаюсь создать пользовательскую директиву для проверки ввода.

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' 
       } 
      } 
     }; 
}); 

Я ожидаю значение, введенное в поле ввода в пороговом значении, но получаю 'неопределенный'.

Ссылка: What's the difference between ngModel.$modelValue and ngModel.$viewValue

Answer 1

Шаблон директивы создать input type и вы используете эту директиву в другом тексте input типа. Вы не можете использовать input внутри input.

Директива, которую вы создали, должна использоваться в div или в другом месте. как показано ниже. Другой атрибут для директивы должен быть определен внутри шаблона.

<div drtooltip-message> 

Answer 2

Вы можете локально получить данные в вашей директиве, используя scope.ngModel хотя я дам вам гораздо лучше подход к реализации вашего решения.

Ваш html, вероятно, будет выглядеть так и просто добавить ваши соответствующие атрибуты.

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

Тогда ваша директива будет выглядеть следующим образом

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; 
       }; 
      } 
     }; 
}); 

Надежда, что помогает