AngularJS提交调用不起作用答案

【问题标题】：AngularJS submit call don't workAngularJS提交调用不起作用
【发布时间】：2017-07-29 15:57:04
【问题描述】：

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

我将 Onsen 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发送？

谢谢

【问题讨论】：

数据在模型中
描述问题。“它不起作用”不是问题陈述。告诉我们预期的行为应该是什么。告诉我们错误消息的确切措辞是什么，以及产生它的代码行。在问题的标题中简要说明问题。

标签： angularjs onsen-ui angularjs-ng-form ng-submit

【解决方案1】：

这是一个触发提交功能的例子，它在浏览器控制台中控制台记录模型联系人，以检查模型是否正确。你需要打电话 $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>

【讨论】：