javascript - AngularJS 表单没有提交 ng-click 事件

Question

我开始创建 AngularJS 表单，我的 AngularJS 应用程序的其他部分工作正常。

html 文件看起来像这样

<form role="form" ng-submit="submitForm()">

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control"
           ng-model="employee.fullName" />
</div>


<div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit"
           ng-click="submitForm()" />
</div>
</form>

控制者

  var QuestionEditController = function ($location, questionService, $env) {

    var employee = {};

    console.log('pre employee', employee);  // this works

    submitForm = function () {

        console.log('employee', employee);  // clicking on submit button does not make it in here

    };

我正在使用 ui-router，它看起来像这样

     .state("editquestion",
            {
                url: "/editquestion",
                templateUrl: viewBase + "questionEdit.html",
                controller: "QuestionEditController",
                controllerAs: "vm"
            });

};

我确实有一个简单的指令，它只显示 html 代码模板，但我看不出这会导致什么问题，我做错了什么？

更新

好的，问题确实出在 ng-click 上。

但是，我想知道我是否在制造更多的“困惑”，看看我在 submitForm 前面添加的其他内容 (vm.)

新的 HTML

<form role="form" ng-submit="vm.submitForm()">

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control"
           ng-model="vm.employee.fullName" />
</div>


<div class="col-sm-offset-3 col-sm-9">
    <input type="submit" class="btn btn-primary" value="Submit"/>
</div>
</form>

Controller 已更新

var QuestionEditController = function ($location, questionService, $env) {

    var vm = this;

    vm.employee = {};

    console.log('pre employee', vm.employee);

    vm.submitForm = function () {

        console.log('employee', vm.employee);

    };

};

我正在做的事情是否需要，部分需要还是不需要？

Answer 1

由于 documentation您不需要 ng-click 指令来触发 ng-submit。只需在表单元素中使用 type="submit" 输入即可。 ng-submit 将通过按下表单中的提交按钮来触发。

<form role="form" ng-submit="vm.submitForm()">
    <div class="form-group">
        <label for="fullName">Name</label>
        <input type="text" 
               id="fullName" 
               name="fullName" 
               class="form-control" 
               ng-model="vm.employee.fullName" />
    </div>
    <div class="col-sm-offset-3 col-sm-9">
        <input type="submit" 
               class="btn btn-primary" value="Submit" />
    </div>
</form>

---

确保您的提交函数是基于 Controller 或基于作用域的函数，以便它能够被 View 调用:

var QuestionEditController = function ($location, questionService, $env) {
    var vm = this
    vm.employee = {};
    vm.submitForm = function () {
        console.log('employee', employee);  
    };
};