javascript - ng-submit 未执行

Question

我有以下形式:

<form  class="panel-body wrapper-lg" id="form_login"  ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
    <div class="form-group">
        <label class="control-label">Brugernavn</label>
        <input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
    </div>
    <div class="form-group">
        <label class="control-label">Kodeord</label>
        <input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
    </div>

    <input type="submit" class="btn btn-lb-primary" value="Log på">
</form>

非常简单。

现在我有以下 Controller 代码:

userModule.controller('UserController', ['$http', '$scope', function($http, $scope) {
  this.user = {
    username: "",
    password: ""
  };

  $scope.test = function() {
    alert($scope.user);
  }
}]);

现在，当我尝试提交表单时，test 函数从未被调用。

谁能告诉我为什么？

更新我的代码

userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
{
    var vm = this;
    vm.user =
    {
        username: "",
        password: ""
    };

    vm.test = function()
    {
        alert(vm.user);
    }
}]);

表单

    <form  class="panel-body wrapper-lg" id="form_login"  ng-controller="UserController as userCtrl" ng-submit="test()">
    <div class="form-group">
        <label class="control-label">Brugernavn</label>
        <input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
    </div>
    <div class="form-group">
        <label class="control-label">Kodeord</label>
        <input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
    </div>

    <input type="submit" class="btn btn-lb-primary" value="Log på">
</form>

完整代码

用户模块

/** * 由 root 于 2015 年 2 月 12 日创建。 */

(function () {
    var userModule = angular.module('user', []);

    userModule.controller('UserController', ['$http','$scope', function ($http, $scope)
    {
        var vm = this;
        vm.user =
        {
            username: "",
            password: ""
        };

        vm.test = function()
        {
            alert(vm.user);
        }
    }]);


    userModule.controller('LoginController', function()
    {

        this.password_form = {};
        this.state = 'login';

        this.setState = function(value)
        {
            this.state = value;
        };
        this.checkState = function(value)
        {
            return value == this.state;
        }
    })
})();

完整的 html View

    <span ng-controller="LoginController as loginCtrl">
    <section class="panel panel-default bg-white m-t-lg animated fadeInDownBig" id="login_section" ng-show="loginCtrl.checkState('login');"
         xmlns="http://www.w3.org/1999/html">
    <form  class="panel-body wrapper-lg" id="form_login"  ng-controller="UserController as userCtrl" ng-submit="userCtrl.test()">
        <div class="form-group">
            <label class="control-label">Brugernavn</label>
            <input type="email" class="form-control input-lg" id="txt_username" name="username" placeholder="Brugernavn" ng-model="userCtrl.user.username" >
        </div>
        <div class="form-group">
            <label class="control-label">Kodeord</label>
            <input type="password" name="password" placeholder="Kodeord" class="form-control input-lg" ng-required="" ng-model="userCtrl.user.password">
        </div>

        <input type="submit" class="btn btn-lb-primary" value="Log på">
    </form>
    <p class="text-muted text-center wrapper-lg">
        <small>
            <a href="" ng-click="loginCtrl.setState('order')" id="order_demo">Er du endnu ikke bruger af <span class="text-lb">Learningbank</span>? Tryk her
                og få en gratis demo</a>
        </small>
    </p>
    <div class="line line-dashed"></div>
    <p class="text-muted text-center">
        <small><a href="" id="forgot_password" ng-click="loginCtrl.setState('password');">Glemt kodeord?</a></small>
    </p>
</section>

<section  class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_retrieve" ng-show="loginCtrl.checkState('password')">
    <section class="panel-heading">
        <h3 class="h3">Glemt dit kodeord?</h3>

        <p class="text text-muted">Indtast din mail adresse og få tilsendt en ny</p>
    </section>
    <form method="POST" class="panel-body wrapper-lg" action="/Users/retrieve_password">
        <div class="form-group">
            <label class="control-label">E-mail</label>
            <input type="email" class="form-control input-lg" name="email" placeholder="E-mail" ng-model="notificationCtrl.mail" ng-required="">
        </div>
        <button ng-click="loginCtrl.setState('login')" id="btn_back" type="button" class="btn btn-default"><i class="fa fa-arrow-left"></i> Tilbage</button>
        <input type="submit" class="btn btn-primary pull-right" value="Send">
    </form>
</section>

<section class="panel panel-default dropdown-toggle bg-white m-t-lg animated fadeInDownMedium" id="section_demo" ng-show="loginCtrl.checkState('order');">
    <section class="panel-heading">
        <h3 class="h3">Bestil en gratis demo</h3>

        <p class="text text-muted">Udfyld nedenstående formular og få en gratis demo</p>
    </section>
    <form method="POST" name="demo" class="panel-body wrapper-lg" action="/Users/contact" data-parsley-validate>
        <div class="form-group">
            <label for="txt_email" class="control-label">E-mail *</label>
            <input type="email" class="form-control input-lg" id="txt_email" name="email" placeholder="E-mail"
                   data-parsley-trigger="change" required/>
        </div>
        <div class="form-group">
            <label for="txt_fornavn" class="control-label">Fornavn *</label>
            <input type="text" class="form-control input-lg" id="txt_fornavn" name="fornavn" placeholder="Fornavn"
                   data-parsley-trigger="change" required/>
        </div>
        <div class="form-group">
            <label for="txt_efternavn" class="control-label">Efternavn</label>
            <input type="text" class="form-control input-lg" id="txt_efternavn" name="efternavn"
                   placeholder="Efternavn">
        </div>
        <div class="form-group">
            <label for="txt_telefon" class="control-label">Telefon</label>
            <input type="text" class="form-control input-lg" id="txt_telefon" name="phone" placeholder="Telefon">
        </div>
        <div class="form-group">
            <label for="txt_virksomhed" class="control-label">Virksomhed *</label>
            <input type="text" class="form-control input-lg" id="txt_virksomhed" name="company" placeholder="Virksomhed"
                   data-parsley-trigger="change" required/>
            <small>* påkrævet</small>
            <br>
        </div>
        <button id="btn_back_demo" type="button" class="btn btn-default" ng-click="loginCtrl.setState('login')"><i class="fa fa-arrow-left"></i>Tilbage
        </button>
        <input type="submit" class="btn btn-primary pull-right" value="Send">
    </form>
</section>

<section class="panel panel-default bg-learning padder padder-v m-t-lg animated fadeInDownBig text-center">
    <p class="font-semibold">
        Velkommen til Learningbank
        <br/>
        "Dit personlige læringsmiljø"
    </p>
    <span style="font-size: 12px; margin-bottom: 5px;">Vil du vide mere om Learningbank, kan du se mere <a
            href="http://www.learningbank.dk/" target="_blank" class="font-semibold"
            style="text-decoration: underline; color:#fff;">her</a></span>
    <span style="font-size: 12px;">PLE - Personal Learning Environment</span>
</section>
    </span>

Answer 1

因为您使用 Controller 作为语法，所以您需要将测试函数绑定(bind)到 this 而不是 $scope。

但是我会推荐做类似的事情

var vm = this;

在第一行。然后函数变为:

vm.test = function() {
   alert(vm.user);
}

参见 https://github.com/johnpapa/angularjs-styleguide#controllers更多细节。强烈推荐阅读该指南。