์ด ๋ฐ์ด์ฌ๋ฆฐ์ ์ฐธ์กฐํ์ญ์์ค.
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์ ๊ณต๊ฐ์ ์ผ๋ก ๋ ธ์ถ๋๋ ํจ์์ฌ์ผ ํฉ๋๊น?
๊ธ์, ๋๋ ๊ทธ ๋ธ๋ก์ ์ง์๋ฌธ์ผ๋ก ๋ณต์ฌ ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค. ๋ชจ๋ ๊ณต๊ฐ๋ ๋ด์ฉ์ ๋๋ค. ๊ทธ๋๋ ๋น์ ์ ์ํด ๊ทธ๊ฒ์ ํ ์์๋ ๊ธฐ๋ฅ์ด ์์ผ๋ฉด ํธ๋ฆฌ ํ ๊ฒ์ ๋๋ค.
+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
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
+1์ด ์์ผ๋ฉด ์ ๋ง ์ข์ ๊ฒ์ ๋๋ค. ๋น๋๊ธฐ ํฌ๋งทํฐ์ ํ์๊ฐ ์๊ธฐ ๋๋ฌธ์ ๋น๋๊ธฐ ๋ฐ์ดํฐ๋ก ์์ ํ๋ ๊ฒ์ด ๋งค์ฐ ๋ถ์พํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋น๋๊ธฐ ๋ฐ์ดํฐ ์๋ณธ์ ๋ํ ๋๊ธฐ ์ ํจ์ฑ ๊ฒ์ฌ๋ก ์ธํด ๋ฐ์ํ๋ ์ผ๋ถ ๊ฒฝ์ ์กฐ๊ฑด์ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์ฐธ๊ณ ๋ก @jpsimons ์ ๋งค์ฐ ์ ์ฌํ๊ฒ ์ํํ์ต๋๋ค.