Javascript 使用ngModel的自定义输入指令不更新模型值

我想在自定义输入指令中使用ngPattern。为了发挥作用，我首先创建了以下指令：

myApp.directive('myInput', [function() {
    return{
        restrict: 'A',
        replace: true,
        require: 'ngModel',
        scope: true,
        template:
            '<div>' +
            '  <input type="text" ng-model="val" ng-change="updateValue()" ng-pattern="/^-?(?:\d+|\d*\.(\d+)?)$/i">' +
            '</div>',
        link: function(scope, element, attrs, ngModelCtrl){     
            scope.updateValue = function(){
                ngModelCtrl.$setViewValue(scope.val);
            }

            ngModelCtrl.$render = function () {
                scope.val = ngModelCtrl.$viewValue;
            };
        }
    };
}]);

我绑定到

“model.testValue”

（如中所示），然后在执行

ngModelCtrl.$setViewValue（scope.val）

之后，模型成为一个空对象。在正常输入字段中再次设置该值会将

scope.model

变量重置为正常对象。对我来说，这毫无意义。知道为什么会这样吗？

经验法则：

无论传递给ng模型的是什么，都应该有一个。这意味着您不想绑定到原语

---

我自己找到了一个解决办法。我不确定这是否是最好的方法，但它是有效的。例如，我看到了与我的原始版本非常相似的指令（在数据绑定实现的意义上）

重要的是保留ngModelController的原始

$render

函数的引用，并在使用

$setViewValue

后调用此函数

但最终对我起作用的是：

myApp.directive('myInput', ['$parse', function($parse) {
    return{
        restrict: 'A',
        replace: true,
        require: 'ngModel',
        scope: true,
        template:
            '<div>' +
            '  <input type="text" ng-model="val" ng-change="updateValue()"  ng-pattern="regex" >' +
            '</div>',
        link: function(scope, element, attrs, ngModelCtrl){
            var orignalRender = ngModelCtrl.$render;
            scope.regex = /^-?(?:\d+|\d*\.(\d+)?)$/i;
            ngModelCtrl.$render = function () {
                scope.val = ngModelCtrl.$viewValue;
            };              
            scope.updateValue = function(){
                ngModelCtrl.$setViewValue(scope.val);
                orignalRender();
            }
        }
    };
}]);

myApp.directive（'myInput'，['$parse'，function（$parse）{
返回{
限制：“A”，
替换：正确，
要求：'ngModel'，
范围：正确，
模板：
'' +
'  ' +
'',
链接：函数（范围、元素、属性、ngModelCtrl）{
var orignalRender=ngModelCtrl.$render；
scope.regex=/^-？（？：\d+\d*\（\d+））$/i；
ngModelCtrl.$render=函数（）{
scope.val=ngModelCtrl.$viewValue；
};              
scope.updateValue=函数（）{
ngModelCtrl.$setViewValue（scope.val）；
orignalRender（）；
}
}
};
}]);

正如您在plunkr中看到的，有一个“.”，因此我绑定了一个模型而不是一个原语。我想他是指模板字符串中的ng模型，而您没有使用“.”

myApp.directive('myInput', ['$parse', function($parse) {
    return{
        restrict: 'A',
        replace: true,
        require: 'ngModel',
        scope: true,
        template:
            '<div>' +
            '  <input type="text" ng-model="val" ng-change="updateValue()"  ng-pattern="regex" >' +
            '</div>',
        link: function(scope, element, attrs, ngModelCtrl){
            var orignalRender = ngModelCtrl.$render;
            scope.regex = /^-?(?:\d+|\d*\.(\d+)?)$/i;
            ngModelCtrl.$render = function () {
                scope.val = ngModelCtrl.$viewValue;
            };              
            scope.updateValue = function(){
                ngModelCtrl.$setViewValue(scope.val);
                orignalRender();
            }
        }
    };
}]);