Question

我试图在ng-submit上调用一个函数来推送到一个数组，如果我在控制台上记录它的功能，它只是在按钮事件上运行，而不会调用ng-submit。我一直在研究这个问题。我为这个问题创建了一个codepen。

<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不提交表格

1 个答案: