javascript - 使用 AngularJS 使用 $http 发布到服务器

Question

我确信这将与其他帖子重复，但我就是找不到它？

我刚刚开始研究 Angular，并根据各种在线资源编写了以下内容。

HTML:

<div data-ng-app="appAuthentication">

    <form name="authentication" method="post" data-ng-controller="AuthenticationController" data-ng-submit="doAuthentication(authentication)" novalidate>

        <fieldset>

            <label for="sign-in-email-address">Email address:</label>
            <input id="sign-in-email-address" name="sign-in-email-address" data-ng-model="authentication.emailAddress" type="text" required />

            <label for="sign-in-password">Password:</label>
            <input id="sign-in-password" name="sign-in-password" data-ng-model="authentication.password" type="password" required />

            <button type="submit">Go &#187;</button>

        </fieldset>

    </form>

</div>

还有我的 Angular :

angular.module('appAuthentication', [])

    .controller('AuthenticationController', ['$scope', function($scope, $http) {

        $scope.authentication = {
            emailAddress: '',
            password: ''
        };

        $scope.doAuthentication = function(authentication) {

            // console.log('Hello ' + authentication.emailAddress);

            $http({
                method : 'POST',
                url : '/actions/authentication/sign-in.php',
                data : authentication.emailAddress
            })
            .success(function () {
                console.log('Success');
            })
            .error(function () {
                console.log('Failure');
            });

        };

    }]);

在控制台中我得到:

TypeError: undefined is not a function
    at k.$scope.doAuthentication (http://cms2.indypub.co.uk/static/scripts/core.js:16:4)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:176:88
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:165
    at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:111:373)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:112:121)
    at HTMLFormElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:147)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:161
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:7:290)
    at HTMLFormElement.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:143) 

当我取消注释 JS 中的第一个 console.log 时，emailAddress 会在控制台中写出。

非常感谢任何指出我出错的地方。

谢谢

托尼。

Answer 1

主要问题在于您的 Controller 依赖项，您已隐式放置 $http在函数参数中，但不在其数组表示法中。

更改:

controller('AuthenticationController', ['$scope', function($scope, $http) {
  // your code
});

至

controller('AuthenticationController', ['$scope', '$http', function($scope, $http) { 
  // your code
});

此外，更改您的 name input 中的值属性标签，使其符合变量名称 - 因为您将在验证表单时访问这些名称。

例如<form name>.<input name>.$pristine或<form name>.<input name>.$error

更改:

    <label for="sign-in-email-address">Email address:</label>
    <input id="sign-in-email-address" name="sign-in-email-address" data-ng-model="authentication.emailAddress" type="text" required />

    <label for="sign-in-password">Password:</label>
    <input id="sign-in-password" name="sign-in-password" data-ng-model="authentication.password" type="password" required />

至:

    <label for="sign-in-email-address">Email address:</label>
    <input id="sign-in-email-address" name="sigInEmailAddress" data-ng-model="authentication.emailAddress" type="text" required />

    <label for="sign-in-password">Password:</label>
    <input id="sign-in-password" name="signInPassword" data-ng-model="authentication.password" type="password" required />