Кутовий шлях
Правильний кутовий спосіб зробити це - написати додаток на одній сторінці, AJAX у шаблон форми, а потім динамічно заповнити його у моделі. Модель не заповнюється із форми за замовчуванням, оскільки модель є єдиним джерелом істини. Натомість Angular піде іншим шляхом і спробує заповнити форму з моделі.
Якщо, однак, у вас немає часу починати з нуля
Якщо у вас є додаток, написане, це може спричинити за собою досить значні архітектурні зміни. Якщо ви намагаєтеся використовувати Angular для вдосконалення існуючої форми, а не для того, щоб створювати з однієї сторінки цілу програму для однієї сторінки, ви можете витягнути значення з форми та зберегти її у межах в часі посилання за допомогою директиви. Потім Angular буде прив'язувати значення в області назад до форми і зберігати його в синхронізації.
Використання директиви
Ви можете використовувати відносно просту директиву, щоб витягнути значення з форми і завантажити її в поточну область. Тут я визначив директиву 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);
}
};
});
Ви можете бачити, що я визначив пару резервних копій, щоб отримати назву моделі. Ви можете використовувати цю директиву спільно з директивою ngModel або прив'язувати до чогось іншого, ніж $ range, якщо вам зручніше.
Використовуйте його так:
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}
Зверніть увагу, це також буде працювати з текстовими областями та вибирати спадні місця.
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}