Question

我正在编写一个指令，以在textarea字段上强制执行maxlength（HTML版本＆lt; 5）。我正在使用AngularJS。因此，我希望以正确的AngularJS方式完成它。但是，当我按照“Angularesque”这样做时，我无法让它完全发挥作用。

(function () {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.controller('MyController', function($scope) {
    $scope.textareaText = "";
});

myAppModule.directive('myMaxlength', ['$compile', '$log', function($compile, $log) {
    return {
        priority: 10000,
        restrict: 'A',
        require: 'ngModel',
        compile: function (elem, attrs) {
            elem.attr("ng-trim", "false");
            return function(scope, linkElem, linkAttrs, ctrl) {
                var maxlength = parseInt(linkAttrs.myMaxlength, 10);
                ctrl.$parsers.push(function (value) {
                    $log.info("In parser function value = [" + value + "].");
                    if (value.length > maxlength)
                    {
                        $log.info("The value [" + value + "] is too long!");
                        value = value.substr(0, maxlength);
                        ctrl.$setViewValue(value);
                        ctrl.$render();
                        $log.info("The value is now truncated as [" + value + "].");
                    }
                    return value;
                });
            };
        }
    };
}]);
})();

这几乎可以工作（请参阅 JSFIDDLE here注意：此小提琴已经使用下面选择的解决方案进行了更新，但上面的代码仍然显示了此处提到的问题。）。它正确限制了转到模型的字符，并将其呈现回显示。但是，您可以继续输入空格以超过指定的最大长度。额外的空间不会进入模型，但它们会使显示器混乱。我相信这与ng-trim有关。正如您所看到的（在代码片段中）我在编译函数中设置了属性，但到那时为时已晚。有人建议在编译函数中手动调用compile以强制AngularJS识别动态添加的属性，但“出现”以创建另一个副本并且不能解决显示问题。将ng-trim="false"放在textarea元素上有效，但我想要一个干净的解决方案，其中所有用户需要做的是添加一个指定最大长度的属性。

这是另一个例子（参见 JSFIDDLE here），在我看来并不像“Angularesque”那样完成工作。

(function () {
'use strict';
var myAppModule = angular.module('myApp', []);
myAppModule.controller('MyController', function($scope) {
    $scope.textareaText = true;
});
myAppModule.directive('myMaxlength', ['$log', function($log) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var maxlength = parseInt(attrs.myMaxlength, 10);
            $log.info("maxlength=[" + maxlength + "]");
            elem.bind('keydown', function (event) {
                $log.info("elem.val().length=[" + elem.val().length + "]");

                if (elem.val().length >= maxlength)
                {
                    // Void event Except backspace
                    if (event.keyCode != 8){
                        event.preventDefault();
                    }
                }
            });
        }
    };
}]); 
})();

那么，在textarea字段上实现maxlength的真正“Angularesque”方式是什么？提前谢谢！

Answer 1

您可以在html文件的输入字段中使用ngMaxlength参数（文档：https://docs.angularjs.org/api/ng/directive/input）

例如

<input type="text" ng-model="myRestrictedText" ng-maxlength="10"/>

Answer 2

您可以使用$attr.$set()（请参阅doc）以ng-trim识别的方式添加ngModel属性。

在编译函数中更改代码的这一行：

elem.attr("ng-trim", "false");

到此：

attrs.$set("ngTrim", "false");

注意：请务必将属性值更改为 camelCase ！

你也可以在链接函数中执行它（不需要编译函数）：

linkAttrs.$set("ngTrim", "false");

jsfiddle： http://jsfiddle.net/J7MJF/7/

在textarea字段上实现maxlength的真正“Angularesque”方法是什么？

2 个答案: