ng提交未执行

ng-submit is not executed

本文关键字:执行 提交 ng      更新时间:2023-12-23

我有以下形式:

<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>

这很简单。

现在我有以下控制器代码:

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>

完整代码

用户模块

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

(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视图

    <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>

因为使用控制器作为语法,所以需要将测试函数绑定到它,而不是绑定到$scope。

然而,我建议做一些类似的事情

var vm = this;

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

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

请参阅https://github.com/johnpapa/angularjs-styleguide#controllers了解更多详细信息。强烈建议阅读该指南。

对于HTML:无需使用"userCtrl",您已将控制器绑定到表单。
对于JS:你写的是这个.user。但它应该是$scope.user

它将工作