O caminho angular
A maneira angular correta de fazer isso é escrever um aplicativo de página única, o AJAX no modelo de formulário e preenchê-lo dinamicamente a partir do modelo. O modelo não é preenchido do formulário por padrão porque o modelo é a única fonte de verdade. Em vez disso, o Angular seguirá o outro caminho e tentará preencher o formulário a partir do modelo.
Se, no entanto, você não tiver tempo para começar do zero
Se você tiver um aplicativo escrito, isso poderá envolver algumas mudanças arquiteturais bastante pesadas. Se você estiver tentando usar o Angular para aprimorar um formulário existente, em vez de construir um aplicativo de página única inteiro do zero, poderá extrair o valor do formulário e armazená-lo no escopo no momento do link usando uma diretiva. O Angular vinculará o valor no escopo ao formulário e o manterá sincronizado.
Usando uma diretiva
Você pode usar uma diretiva relativamente simples para extrair o valor do formulário e carregá-lo no escopo atual. Aqui eu defini uma diretiva 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);
}
};
});
Você pode ver que eu defini algumas alternativas para obter um nome de modelo. Você pode usar esta diretiva em conjunto com a diretiva ngModel ou vincular a algo diferente de $ scope, se preferir.
Use-o assim:
<input name="test" ng-model="toaster.test" value="hello" init-from-form />
{{toaster.test}}
Observe que isso também funcionará com áreas de texto e selecione menus suspensos.
<textarea name="test" ng-model="toaster.test" init-from-form>hello</textarea>
{{toaster.test}}