다음 ckEditor 지시문이 있습니다. 하단에는 편집기에서 데이터를 설정하는 방법에 대한 예제에서 본 두 가지 변형이 있습니다.
app.directive('ckEditor', [function () {
return {
require: '?ngModel',
link: function ($scope, elm, attr, ngModel) {
var ck = null;
var config = attr.editorSize;
if (config == 'wide') {
ck = CKEDITOR.replace(elm[0], { customConfig: 'config-wide.js' });
} else {
ck = CKEDITOR.replace(elm[0], { customConfig: 'config-narrow.js' });
}
function updateModel() {
$scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
}
$scope.$on('modalObjectSet', function (e, modalData) {
// force a call to render
ngModel.$render();
});
ck.on('change', updateModel);
ck.on('mode', updateModel);
ck.on('key', updateModel);
ck.on('dataReady', updateModel);
ck.on('instanceReady', function () {
ngModel.$render();
});
ck.on('insertElement', function () {
setTimeout(function () {
$scope.$apply(function () {
ngModel.$setViewValue(ck.getData());
});
}, 1000);
});
ngModel.$render = function (value) {
ck.setData(ngModel.$modelValue);
};
ngModel.$render = function (value) {
ck.setData(ngModel.$viewValue);
};
}
};
}])
누군가가 다음의 차이점을 말해 줄 수 있습니까?
ck.setData(ngModel.$modelValue);
ck.setData(ngModel.$viewValue);
그리고 어느 것을 사용해야합니다. 각도 문서를 살펴보면 다음과 같이 표시됩니다.
$viewValue
Actual string value in the view.
$modelValue
The value in the model, that the control is bound to.
나는 저자가 문서에서 이것을 썼을 때 무엇을 의미했는지 전혀 모른다 🙁
답변
올바른 문서를보고 있지만 약간 혼란 스러울 수 있습니다. $modelValue
및 $viewValue
하나 개의 뚜렷한 차이가있다. 이것은 :
위에서 이미 언급했듯이 :
$viewValue:
보기의 실제 문자열 (또는 개체) 값입니다.
$modelValue:
컨트롤이 바인딩 된 모델의 값입니다.
ngModel이 <input />
요소를 참조한다고 가정하겠습니다 …? 따라서 사용자 <input>
에게 표시되는 문자열 값이 있습니다. 그러나 실제 모델은 해당 문자열의 다른 버전 일 수 있습니다. 예를 들어 입력은 문자열을 표시 할 수 '200'
있지만 <input type="number">
(예를 들어) 실제로는 모델 값을 200
정수로 포함합니다 . 따라서 “보기”에서 문자열 표현 <input>
은 ngModel.$viewValue
이고 숫자 표현은 ngModel.$modelValue
.
또 다른 예 는가 있는 <input type="date">
곳 과 해당 날짜 문자열을 나타내는 실제 자바 스크립트 객체입니다. 말이 돼?$viewValue
Jan 01, 2000
$modelValue
Date
귀하의 질문에 대한 답변이 되었기를 바랍니다.
답변
다음과 같은 것을 볼 수 있습니다.
$modelValue
즉, 컨트롤러에 노출되는 외부 API입니다.$viewValue
내부 API이므로 내부적으로 만 사용해야합니다.
을 편집 할 때 $viewValue
“렌더링 된 모델”이기 때문에 render 메서드가 호출되지 않습니다. 수동으로 수행해야하는 반면 렌더링 방법은 $modelValue
수정 시 자동으로 호출됩니다 .
그러나, 정보, 덕분에 일관성을 유지합니다 $formatters
및 $parsers
:
- 당신이 변경하는 경우
$viewValue
,$parsers
그것은으로 다시 변환합니다
$modelValue
. - 당신이 변경하는 경우
$modelValue
,$formatters
로 변환됩니다$viewValue
.
답변
Angular는 ngModel 데이터의 두 가지 뷰를 추적해야합니다. DOM (브라우저)에서 볼 수있는 데이터가 있고 해당 값에 대한 Angular의 처리 된 표현이 있습니다. 이것은 $viewValue
DOM 측 값입니다. 따라서, 예를 들어,에 <input>
는 $viewValue
사용자가 브라우저에 입력 한 내용입니다.
누군가 유형은 무엇인가되면 <input>
그 다음은 $viewValue
$ 파서에 의해 처리 및 호출되는 값의 각도의 관점으로 전환됩니다 $modelValue
.
따라서 $modelValue
앵귤러의 처리 된 값인 모델에서 볼 수있는 값인 반면 $viewValue
원시 버전 이라고 생각할 수 있습니다 .
이것을 한 단계 더 나아 가기 위해 우리가 $modelValue
. Angular는이 변경 사항을 확인하고 $ formatters를 호출 $viewValue
하여 DOM으로 보낼 업데이트 된 (새 $ modelValue 기반) 을 만듭니다 .