AngularJS 提交调用不起作用

Question

我从Angular JS开始，在论坛上找不到答案。

我将温泉UI与Angular一起使用，并尝试使用Angular发出AJAX请求，只是为了提交它，它不起作用

我的代码 ：

ons.bootstrap()
.controller('contactController', function($scope) {
$scope.submit = function () {
alert('test');
}
});

和我的表格：

<form ng-controller="contactController" ng-submit="submit()" >
<p>
<ons-input id="motif_contact"  placeholder="Motif du contact"
float ng-model="contact.motif">
</ons-input>
</p>
<p>
<ons-input id="email_contact"  placeholder="Adresse e-mail"
float ng-model="contact.email">
</ons-input>
</p>    <p>
<textarea class="textarea--transparent" 
style="border-bottom:1px solid grey;" 
rows="3" placeholder="Votre message">
</textarea>
</p>
<p>
</p>
<p style="margin-top: 30px;">
<center><ons-button   >Envoyer</ons-button></center>
</p>

</form>

最后一个问题，只要我是，它如何恢复表单的数据以通过 ajax 发送它？

谢谢

Answer 1

这是一个触发提交功能的示例，它控制台.log模型联系人在浏览器控制台，检查模型是否正确。您需要致电$http对服务器或 API 端点的 AJAX 请求。

我愿意为那些人提供服务，并注入控制器和简单的调用并发送参数。

控制器

ons.bootstrap().controller('contactController', function($scope) {
var vm = this;
vm.contact = {
motif:'',
email:'',
message:''
};
vm.submit = function () {
console.log(vm.contact);
}
});

.html

<form ng-controller="contactController as vm" ng-submit="vm.submit()" >
<p>
<ons-input id="motif_contact"  placeholder="Motif du contact"
float ng-model="vm.contact.motif">
</ons-input>
</p>
<p>
<ons-input id="email_contact"  placeholder="Adresse e-mail"
float ng-model="vm.contact.email">
</ons-input>
</p>    
<p>
<textarea class="textarea--transparent" 
style="border-bottom:1px solid grey;" 
rows="3" placeholder="Votre message" ng-model="vm.contact.message">
</textarea>
</p>
<p>
</p>
<p style="margin-top: 30px;">
<center><ons-button>Envoyer</ons-button></center>
</p>
</form>