angularjs、ng模型和maxlength:字符串未被截断

如果我有这个html：

    <input type="text" ng-model="person.name" maxlength="10" />

我得到的“渲染”是：

但我希望maxlength会截断字符串，就像从头开始键入（输入字段以空白开头）时一样。检查此gif动画：

问题：是否有一个简单的解决方法来实现我的期望

问题是，如果模型值不是有效长度，则无法获取模型值，即： 稍后通过ajax请求发送

$scope.person.name

---

注意：ng maxlength的行为与此相同

您可以创建自己的指令

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" class="" ng-model="person.name" placeholder="">

app.directive（“limito”，[function（）{
返回{
限制：“A”，
链接：功能（范围、要素、属性）{
var limit=parseInt（attrs.limitTo）；
角度元素（元素）开启（“按键”，功能（e）{
如果（this.value.length==limit）e.preventDefault（）；
});
}
}
}]);

使用

ng maxlength

时，应设置

maxlength

错误键。您可以在模板代码中检查该键，并在最初加载模型时显示错误，然后在模型验证通过之前阻止用户提交表单（或任何内容）。是否可以使用ng change并仅返回字符串的前几个字符？

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" class="" ng-model="person.name" placeholder="">