Angular way
Prawidłowym sposobem Angulara jest napisanie jednej strony aplikacji AJAX w szablonie formularza, a następnie wypełnienie jej dynamicznie z modelu. Model nie jest domyślnie wypełniany z formularza, ponieważ jest jedynym źródłem prawdy. Zamiast tego Angular pójdzie w drugą stronę i spróbuje wypełnić formularz z modelu.
Jeśli jednak nie masz czasu, aby zacząć od nowa
Jeśli masz napisaną aplikację, może to wymagać dość dużych zmian architektonicznych. Jeśli próbujesz użyć Angulara do ulepszenia istniejącego formularza, zamiast budować od podstaw całą aplikację na jednej stronie, możesz pobrać wartość z formularza i zapisać ją w zakresie w czasie łączenia za pomocą dyrektywy. Angular następnie powiąże wartość w zakresie z powrotem do formularza i utrzyma ją w synchronizacji.
Korzystanie z dyrektywy
Możesz użyć stosunkowo prostej dyrektywy, aby pobrać wartość z formularza i załadować ją do bieżącego zakresu. Tutaj zdefiniowałem dyrektywę initFromForm.
var myApp = angular.module("myApp", ['initFromForm']);
angular.module('initFromForm', [])
.directive("initFromForm", function ($parse) {
return {
link: function (scope, element, attrs) {
var attr = attrs.initFromForm || attrs.ngModel || element.attrs('name'),
val = attrs.value;
if (attrs.type === "number") {val = parseInt(val)}
$parse(attr).assign(scope, val);
}
};
});
Widzisz, zdefiniowałem kilka błędów, aby uzyskać nazwę modelu. Możesz użyć tej dyrektywy w połączeniu z dyrektywą ngModel lub powiązać z czymś innym niż $ scope, jeśli wolisz.
Użyj tego w ten sposób:
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}
Uwaga: będzie to również działać z obszarami tekstowymi i wybierz menu rozwijane.
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}