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

希望有所帮助

Angularjs自定义指令将viewValue视为未定义

2 个答案: