Angular.js: NgModel์€ ํฌ๋งทํ„ฐ ์ฒด์ธ์„ ์ˆ˜๋™์œผ๋กœ ๋‹ค์‹œ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2013๋…„ 07์›” 31์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: angular/angular.js

์ด ๋ฐ”์ด์˜ฌ๋ฆฐ์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.
http://jsfiddle.net/tPWBK/1/

'ngModel'์ด ํ•„์š”ํ•˜๊ณ  ํฌ๋งทํ„ฐ ๋ฐ ํŒŒ์„œ ์ฒด์ธ์— ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ์ดํ„ฐ ๋ณ€ํ™˜ ์ง€์‹œ๋ฌธ์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ณ€ํ™˜์ด $modelValue ๋˜๋Š” $viewValue ์ด์™ธ์˜ ์ผ๋ถ€ ๋™์  ๋ฐ์ดํ„ฐ์— ์ข…์†๋˜๋Š” ๊ฒฝ์šฐ ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ์‹œํ•˜๊ณ  ํฌ๋งทํ„ฐ ์ฒด์ธ์„ ๋‹ค์‹œ ์‹คํ–‰ํ•  ๋ฐฉ๋ฒ•์ด ์—†์Šต๋‹ˆ๋‹ค.

https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1081 ์—์„œ ๋ฐœ์ทŒํ•œ ๋‚ด์šฉ์„

$scope.$watch(function ngModelWatch() {
  var value = ngModelGet($scope);

  // if scope model value and ngModel value are out of sync
  if (ctrl.$modelValue !== value) {

    var formatters = ctrl.$formatters,
        idx = formatters.length;

    ctrl.$modelValue = value;
    while(idx--) {
      value = formatters[idx](value);
    }

    if (ctrl.$viewValue !== value) {
      ctrl.$viewValue = value;
      ctrl.$render();
    }
  }
});

(ctrl.$modelValue !== value) ๊ฒ€์‚ฌ ๋‚ด์˜ ๋ชจ๋“  ํ•ญ๋ชฉ์ด NgModelController์— ๊ณต๊ฐœ์ ์œผ๋กœ ๋…ธ์ถœ๋˜๋Š” ํ•จ์ˆ˜์—ฌ์•ผ ํ•ฉ๋‹ˆ๊นŒ?

forms feature

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

+1์ด ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ ํฌ๋งทํ„ฐ์™€ ํŒŒ์„œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ๋กœ ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋ถˆ์พŒํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ์›๋ณธ์— ๋Œ€ํ•œ ๋™๊ธฐ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•˜๋Š” ์ผ๋ถ€ ๊ฒฝ์Ÿ ์กฐ๊ฑด์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ @jpsimons ์™€ ๋งค์šฐ ์œ ์‚ฌํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

scope.$watch('myAsyncCollection', () => {
  ngModel.$viewValue = ngModel.$formatters.reduceRight((prev, fn) => fn(prev)), ngModel.$modelValue)
  ngModel.$render()
})

๋ชจ๋“  3 ๋Œ“๊ธ€

๊ธ€์Ž„, ๋‚˜๋Š” ๊ทธ ๋ธ”๋ก์„ ์ง€์‹œ๋ฌธ์œผ๋กœ ๋ณต์‚ฌ ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋‘ ๊ณต๊ฐœ๋œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ž˜๋„ ๋‹น์‹ ์„ ์œ„ํ•ด ๊ทธ๊ฒƒ์„ ํ•  ์ˆ˜์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ์œผ๋ฉด ํŽธ๋ฆฌ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

+1์ด ์žˆ์œผ๋ฉด ์ •๋ง ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋น„๋™๊ธฐ ํฌ๋งทํ„ฐ์™€ ํŒŒ์„œ๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ๋กœ ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ๋งค์šฐ ๋ถˆ์พŒํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ์›๋ณธ์— ๋Œ€ํ•œ ๋™๊ธฐ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•˜๋Š” ์ผ๋ถ€ ๊ฒฝ์Ÿ ์กฐ๊ฑด์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค.

์ฐธ๊ณ ๋กœ @jpsimons ์™€ ๋งค์šฐ ์œ ์‚ฌํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

scope.$watch('myAsyncCollection', () => {
  ngModel.$viewValue = ngModel.$formatters.reduceRight((prev, fn) => fn(prev)), ngModel.$modelValue)
  ngModel.$render()
})

๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์ฝ”๋“œ ์กฐ๊ฐ์„ ๊ฒ€์ƒ‰ํ•˜๋Š” ๊ฒฝ์šฐ - ์ด๋™ํ–ˆ์Šต๋‹ˆ๋‹ค.
https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js#L822

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰