Mam następującą dyrektywę ckEditor. U dołu znajdują się dwie odmiany, które widziałem na przykładach, jak ustawić dane w edytorze:
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);
};
}
};
}])
Czy ktoś może mi powiedzieć, jaka jest różnica między:
ck.setData(ngModel.$modelValue);
ck.setData(ngModel.$viewValue);
I którego powinienem użyć. Spojrzałem na dokumentację kątową i mówi:
$viewValue
Actual string value in the view.
$modelValue
The value in the model, that the control is bound to.
Nie mam pojęcia, co autor miał na myśli, pisząc to w dokumencie :-(
$viewValue
zawsze jest ciągiem?$viewValue: Actual string value in the view.
. Więc tak.<input type="text">
wartość jest pusta,$modelValue
właściwość toundefined
, a ciąg$viewValue
jest''
pusty. Może to mieć znaczenie, jeśli wąchasz „długość” tego,$modelValue
co nie zadziała, ale$viewValue
zadziała.$viewValue
Nie zawsze jest ciągiem. Jest to ciąg dla bieżących dyrektyw rdzenia Angular, ale może to być prymityw lub Object w kontrolkach niestandardowych. Dobrym przykładem jest<input file="type">
komponent, w którym viewValue zawieraFileList
obiekt z załączonymi przez użytkownika plikami. Dokumentacja Angulara jest teraz niejasna i powinna zostać zaktualizowana.Możesz zobaczyć takie rzeczy:
$modelValue
to twój zewnętrzny interfejs API, to znaczy coś, co jest widoczne dla twojego kontrolera.$viewValue
to Twój wewnętrzny interfejs API, powinieneś używać go tylko wewnętrznie.Podczas edycji
$viewValue
metoda renderowania nie zostanie wywołana, ponieważ jest to „renderowany model”. Będziesz musiał to zrobić ręcznie, podczas gdy metoda renderowania zostanie wywołana automatycznie po$modelValue
modyfikacjach.Jednak informacje pozostaną spójne, dzięki
$formatters
i$parsers
:$viewValue
,$parsers
przetłumaczy to z powrotem na$modelValue
.$modelValue
,$formatters
przekonwertuje go na$viewValue
.źródło
$viewValue
za pomocąsetViewValue(viewValue)
metody, parsery / walidatoryviewValue
uruchamiają się (jeśli są) i analizują to w modelValue, sprawdzają poprawność, zapisują w zakresie, a następnie wyrzucająviewChangeListeners
. Przy następnym uruchomieniu podsumowania wartość modelu jest pobierana z zakresu i porównywana z wartością $ modelValue w kontrolerze: github.com/angular/angular.js/blob/master/src/ng/directive/… . Jeśli są równe (i będą równe w twoim scenariuszu), to powróci.Angular musi śledzić dwa widoki danych ngModel - są dane widziane przez DOM (przeglądarkę), a następnie jest przetworzona reprezentacja tych wartości przez Angular. Plik
$viewValue
jest wartość po stronie DOM. Na przykład w<input>
polu$viewValue
jest to, co użytkownik wpisał w przeglądarce.Po wpisze coś w
<input>
następnie$viewValue
jest przetwarzany przez $ parserami i przekształcony widzenia kątowego w wartości, które nazywa$modelValue
.Możesz więc pomyśleć o
$modelValue
byciu przetworzoną wersją wartości kątowej, wartością, którą widzisz w modelu, podczas gdy$viewValue
jest to wersja surowa.Aby pójść o krok dalej, wyobraź sobie, że robimy coś, co zmienia
$modelValue
. Angular widzi tę zmianę i wywołuje $ formatters w celu utworzenia zaktualizowanej$viewValue
(opartej na nowej wartości $ modelValue), która ma być wysłana do DOM.źródło