javascript - Angularjs 自定义指令将 viewValue 设为未定义

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 内使用 input。

您创建的指令应在 div 或其他占位符中使用。如下所示。该指令的另一个属性应在模板内定义。

<div drtooltip-message>