Связывание нескольких атрибутов HTML с AngularJS ngModel

Question

Я новичок в AngularJS, так что простите меня, если это вопрос о нобе. Документация довольно короткая, поэтому я, возможно, пропустил что-то очевидное!

Я рассматриваю миграции кучи пользовательского в доме кода угловой, и я должен сделать угловую работу с нашим рисунком REST, в котором ввод выглядит следующим образом:

foo: { 
    value: 100, 
    min: 50, 
    max: 150 
} 

Значение становится значение, отображаемое в элементе input, а min и max привязаны к минимальным и максимальным атрибутам. Они позже подхватываются функцией проверки. Если значение находится за пределами диапазона min-max, оно возвращается обратно в этот диапазон.

Во всяком случае, я пытаюсь сделать что-то вроде:

<input type="text" ng-model="foo" my-bind /> 

... и переопределить ngModel с директивой по имени myBind управлять отношения, так что значение считывается и записывается в foo.value.

Затем я использовал пользовательский валидатор для обработки атрибутов min/max.

Может ли кто-нибудь представить пример того, как я мог бы добиться такого связывания? До сих пор мне не повезло.

... или, может быть, весь мой подход глуп? Мне нужно работать с структурой данных выше, хотя я не могу изменить это в ближайшем будущем.

Answer 1

Я не совсем уверен, что понял вопрос, но мне кажется, что вы могли бы сделать это:

<input type="number" ng-model="foo.value" max="foo.max" min="foo.min" /> 

Если вы все еще нужны пользовательские директивы, вы могли бы сделать что-то подобное, чтобы манипулировать ngModel:

angular.module('customControl', []). 
    directive('contenteditable', function() { 
    return { 
     restrict: 'A', // only activate on element attribute 
     require: '?ngModel', // get a hold of NgModelController 
     link: function(scope, element, attrs, ngModel) { 
     if(!ngModel) return; // do nothing if no ng-model 

     // Specify how UI should be updated 
     ngModel.$render = function() { 
      element.html(ngModel.$viewValue || ''); 
     }; 

     // Listen for change events to enable binding 
     element.bind('blur keyup change', function() { 
      scope.$apply(read); 
     }); 
     read(); // initialize 

     // Write data to the model 
     function read() { 
      ngModel.$setViewValue(element.html()); 
     } 
     } 
    }; 
    }); 

Из документации AngularJS.