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

您发布的代码（功能性）没有任何问题。

通过检查控制台是否有任何错误消息开始调试。
查看您传递给ngForm指令的send函数，以及它在范围内。
检查该文件的HTML标记。也许您有跟踪<form>标记，这些标记会模糊您使用提交按钮定位的表单。

如果您正在使用嵌套控制器，请尝试使用“控制器为”语法，以便您可以避免从每个控制器创建的$ 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”。

谢谢大家！

ng-submit不会以

2 个答案: