пользовательская директива ввода с использованием 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;
            };
        }
    };
}]);

Я вижу в отладчике, что значение scope.val всегда не определено, поэтому вызов $setValue не имеет никакого эффекта. Я попытался удалить атрибут ng-pattern, но и тогда обновление не работает.

Что здесь не так? Планкр можно найти здесь, где я привязываюсь к модели, а не к примитив!

Обновить

Кажется, что вызов ngModelCtrl.$setViewValue(scope.val) в scope.updateValue имеет странный результат. Если есть такая модель:

scope.model = {
    'testValue' : 12
};

И я привязываюсь к "model.testValue" (как в plunkr), тогда модель становится пустым объектом {} после исполнения ngModelCtrl.$setViewValue(scope.val). Повторная установка значения в обычном поле ввода приведет к сбросу переменной scope.model до нормального объекта. Для меня это не имеет смысла. Любая идея, почему это происходит?


javascript angularjs angularjs-directive
person Sjoerd222888    schedule 09.12.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я сам нашел решение. Я не уверен, что это лучший способ, но он работает. Я видел довольно похожие директивы, как и моя оригинальная версия (в смысле, как реализована привязка данных), например jkuri.touchSpin .

Важно было сохранить ссылку на исходную функцию $render ngModelController и вызвать эту функцию после использования $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();
            }
        }
    };
}]);
person Sjoerd222888    schedule 11.12.2015

arrow_upward
-1
arrow_downward

Практическое правило:

Все, что вы передаете в ng-model, должно иметь файл . это означает, что вы не хотите привязываться к примитивам.

https://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m

https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

person Chris Hermut    schedule 09.12.2015
comment
Как видите в планкре есть ., поэтому я привязываю модель не примитивную. - person Sjoerd222888; 09.12.2015
comment
Я думаю, что он имел в виду вашу ng-модель в строке шаблона, где вы не используете файл . - person Ryan M; 15.06.2017