0

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

<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

4

2 回答 2

0

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

  1. 通过检查控制台是否有任何错误消息来开始调试。
  2. 看看send你传递给指令的函数，ngForm它在范围内。
  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>

于 2017-04-22T12:29:39.527 回答
0

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

谢谢大家 ！

于 2017-04-22T12:42:08.563 回答