AngularJS ngModel을 사용하여 여러 HTML 속성 바인딩하기

Question

저는 AngularJS를 처음 사용했습니다. 이것이 멍청한 질문 인 경우 용서해주십시오. 설명서가 꽤 간결하므로 뭔가 확실한 것을 놓칠 수도 있습니다!

내가 각도로 정의 내부 코드의 무리를 마이그레이션 고려하고, 내가하는 입력은 다음과 같습니다, 우리의 REST 패턴 각도 작업을해야 :

이

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

값이된다 값은 input 요소에 표시되고 min 및 max는 (현재) 최소 및 최대 속성에 바인딩됩니다. 이들은 나중에 검증 기능에 의해 선택됩니다. 값이 최소 최대 범위를 벗어나면 해당 범위로 다시 조정됩니다.

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

을 ... 그리고 값이 읽고 foo.value에 기록되도록 관계를 관리 할 수 ​​myBind라는 지시어로 ngModel를 오버라이드 (override) :

어쨌든, 내가 좋아하는 뭔가를 시도하고있다.

나중에 사용자 지정 유효성 검사기를 사용하여 최소/최대 특성을 처리 할 것입니다.

누구나 이러한 바인딩을 얻을 수있는 방법에 대한 예를 제공 할 수 있습니까? 나는 그것이 지금까지 일하게 많은 운을 가지지 않고 있었다.

... 아니면 내 모든 접근 방식이 어리석은가요? 위의 데이터 구조로 작업해야하지만, 가까운 장래에 변경할 수는 없습니다.

Answer 1

제가 질문을 이해 완전히 잘 모르겠지만, 당신이 할 수있는 것처럼 보인다 : 당신은 여전히 ​​사용자 정의 지시가 필요한 경우, 당신은 ngModel을 조작 같은 것을 할 것

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

:

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 문서에서.