ng-click无法处理提交按钮

时间:2015-07-02 21:23:31

标签: angularjs

我正在学习如何使用AngularJS,但我无法使用自定义ng-click功能。我想要做的是触发包含来自我的表单($http.post$scope.email$scope.username)的数据的$scope.password请求。到目前为止,我只尝试传递电子邮件,但是当我点击提交按钮时没有任何反应(没有发出POST请求,我用firebug检查这个)。我尝试将其直接传递为$scope.email,或作为变量传递(如下所示)。

我有一个主页面(index.html),使用ng-view使用ngRoute加载html。这是路线代码:

.when('/register', {
        templateUrl: 'views/register.html',
        controller: 'RegisterCtrl'
      })

这是我的register.html:

<div class="container">
    <div class="col-xs-2 col-sm-3 col-md-4"></div>
    <div class="col-xs-8 col-sm-6 col-md-4">
        <h1>Sign Up:</h1>
        <form>
            <div class="form-group">
                <label for="email">Email address:</label>
                <input type="email" class="form-control" id="email" ng-model="email">
            </div>
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" class="form-control" id="username" ng-model="username">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" ng-model="password">
            </div>
            <button type="submit" class="btn btn-primary col-xs-5" ng-click="register">Sign up</button>
            <div class="col-xs-2"></div>
            <button class="btn btn-info col-xs-5">Go to log in</button>
        </form>
    </div>
</div>

和我的控制员:

'use strict';

angular.module('angularApp')
  .controller('RegisterCtrl', function ($scope, $http) {
        $scope.email = '';
        $scope.username = '';
        $scope.password = '';

        $scope.register = function() {
            // TODO ADD VALIDATION
            var email = $scope.email;
            var username = $scope.username;
            var password = $scope.password;

            // $http request
            $http.post('http://localhost/PTC/API/new_user.php', email).
                success(function(data) {
                    console.log(data);
                }).
                error(function(data) {
                    console.log(data);
                });
        };
  });

1 个答案:

答案 0 :(得分:1)

它应该有函数()括号来调用ng-click="register()"

之类的函数

要获得更好的方式,而不是在表单上使用ng-click,可以将其替换为ng-submit指令

<强>标记

    <form name="myForm" ng-click="register()">
        ...fields here..
        <button type="submit" class="btn btn-primary col-xs-5">Sign up</button>
        <div class="col-xs-2"></div>
        <button class="btn btn-info col-xs-5">Go to log in</button>
    </form>

此外,您需要为表单指定表单名称,以便在表单验证方面获得更好的控制权。