настраиваемая директива ввода с использованием ngModel не обновляет значение модели

Question

Я хотел бы использовать 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, но также обновление не работает.

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

Update

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

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

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

Answer 1

Я нашел решение сам. Я не уверен, что это лучший способ, но он работает. Я видел довольно похожие директивы, такие как моя оригинальная версия (в смысле реализации привязки данных), например 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(); 
      } 
     } 
    }; 
}]); 

Answer 2

правило:

Все, что вы передаете нг-модель должна иметь. что означает, что вы не хотите связываться с примитивами.

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

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