什么才是真正的“angular”?在textarea字段上实现maxlength的方法

我正在写一个指令来强制textarea字段(HTML版本<我用的是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)。注意:这个小提琴已经更新为下面选择的解决方案，但是上面的代码仍然显示这里提到的问题。它正确地限制了进入模型的字符，并将其呈现回显示器。但是，您可以继续输入空格以超过指定的maxlength。多余的空间不会进入模型，但会使展示变得杂乱。我相信这和ng-trim有关。正如您所看到的(在代码片段中)，我正在编译函数中设置该属性，但到那时已经太晚了。有人建议在编译函数中手动调用compile来强制AngularJS识别动态添加的属性，但这"似乎"是在创建另一个副本，并不能解决显示问题。将ng-trim="false"放在textarea元素上工作，但我想要一个干净的解决方案，其中所有用户需要做的就是添加一个指定最大长度的属性。

这里是另一个例子(见这里的JSFIDDLE)，在我看来，它不太像"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"方法是什么?提前感谢!