ng-submit 不会触发任何形式的内容

Question

我有一个基本问题，我不明白为什么它不起作用

<div class="footer">
    <div class="row writing">
        <p>{{slogan}}</p>
    </div>
    {{send()}} //check if the function is there
    <div class="container">
        <form name="userForm" ng-submit="send()" novalidate>
            <div class="form-group col-md-6">
                <ng-form name="userMail">
                    <input name="mail" type="email" ng-model="varmail" class="form-control" placeholder="Your mail" required>
                    <!--<p class="help-block" ng-show="userMail.mail.$invalid">Valid Email Required</p>-->
                </ng-form>
            </div>
            <div class="form-group col-md-6">
                <ng-form name="userMarket">
                    <input type="text" ng-model="varmarket" class="form-control" placeholder="huhu"
                        required>
                </ng-form>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary flat-butt">{{butLabel}}</button>
            </div>
        </form>
    </div>
</div>

所以我可以看到该功能在那里，但 ng-submit 不会触发任何东西。 注意这里是孤立作用域，函数传入成功。

谢谢。

更新：我在这里创建了一个 Plunk，但它也不起作用 http://plnkr.co/edit/CULSC4ajGfid25sEaT34?p=preview

Answer 1

您发布的代码没有问题（功能上）。

1. 通过检查控制台是否有任何错误消息开始调试。
2. 查看您传递给ngForm 指令的send 函数，它在作用域内。
3. 检查该文件的 HTML 标记。也许您有尾随 <form> 标记，这些标记混淆了您使用提交按钮定位的表单。

如果您使用嵌套控制器，请尝试使用“controller as”语法，这样您就可以避免从每个创建的 $scope 访问您的函数和变量。

另外，我不明白为什么您在表单中的输入周围有额外的ngForm 指令。从您发布的内容来看，这似乎没有必要。

这是你的代码工作：

// app.js
(function() {

  'use strict';

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

})();

// main.controller.js
(function() {

  'use strict';

  angular.module('app').controller('MainController', MainController);

  MainController.$inject = ['$scope'];

  function MainController($scope) {

    $scope.butLabel = "Submit";

    $scope.send = send;

    function send() {
      alert("Triggered!");
    }


  }

})();

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

<div class="footer" ng-app="app" ng-controller="MainController as MainCtrl">
  <div class="row writing">
    <p>{{slogan}}</p>
  </div>
  <div class="container">
    <form name="userForm" ng-submit="send()" novalidate>
      <div class="form-group col-md-6">
        <ng-form name="userMail">
          <input name="mail" type="email" ng-model="varmail" class="form-control" placeholder="Your mail" required>
          <!--<p class="help-block" ng-show="userMail.mail.$invalid">Valid Email Required</p>-->
        </ng-form>
      </div>
      <div class="form-group col-md-6">
        <ng-form name="userMarket">
          <input type="text" ng-model="varmarket" class="form-control" placeholder="Your favorite super-market (Franprix, Carrefour,...)" required>
        </ng-form>
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary flat-butt">{{butLabel}}</button>
      </div>
    </form>
  </div>
</div>

Answer 2

所以我发现，当我传入函数时，我应该使用“sendInfo()”，而不是“sendInfo”。

谢谢大家！