Ng-Submit 不提交表单

Question

我正在尝试在 ng-submit 上调用一个函数来推送到一个数组，如果我控制台记录该函数，它显然可以正常工作，它只是在按钮事件上，而 ng-submit 不会被调用。我一直在研究这个问题很长时间。我为这个问题创建了一个代码笔。

<html lang="en">
 <body ng-app="meanDemo">
  <div class="container" ng-controller="mainCtrl as main">
    <ul>
        <li ng-repeat="meetup in main.meetups">
            {{ meetup.name }}
        </li>
    </ul>
</div>


<form ng-submit="main.createMeetup()">
    <input type="text" placeholder="Meetup Name" ng-model="main.meetupName">
    <button class="btn btn-primary" type="submit">Add</button>
</form>

Javascript

angular.module('meanDemo', []);

angular.module('meanDemo').controller('mainCtrl', function(){

var vm = this;
vm.meetups = [ { name: 'Ralphs Meetup'}];

vm.createMeetup = function(){
    console.log('hello');
    vm.meetups.push({ name: vm.meetupName });
    vm.meetups.push({ name: 'bobs meetup' });
    vm.meetupName = " "
}


vm.createMeetup();
console.log(vm.meetups)

Answer 1

问题是您的表单位于具有 ng-controller 属性的 div 之外。因此，该表单未连接到您的 mainCtrl 控制器，并且无法访问 createMeetup 函数。

这是一个代码片段，您真正需要做的就是将表单移动到具有 ng-controller 属性的 div 中：

angular.module('meanDemo', []);

angular.module('meanDemo').controller('mainCtrl', function() {
  var vm = this;

  vm.meetups = [{
    name: 'Ralphs Meetup'
  }];

  vm.createMeetup = function() {
    console.log('hello');
    vm.meetups.push({
      name: vm.meetupName
    });
    vm.meetups.push({
      name: 'bobs meetup'
    });
    vm.meetupName = " "
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="meanDemo">
  <div class="container" ng-controller="mainCtrl as main">
    <ul>
      <li ng-repeat="meetup in main.meetups">
        {{ meetup.name }}
      </li>
    </ul>

    <form ng-submit="main.createMeetup()">
      <input type="text" placeholder="Meetup Name" ng-model="main.meetupName">
      <button class="btn btn-primary" type="submit">Add</button>
    </form>
  </div>
</body>

Ng-Submit 不提交表单

Ng-Submit does not sumbit form

angularjs

ng-submit