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

主要问题在于你的控制器依赖，你已经隐式地将$http放在函数参数中，而不是放在它的数组符号中。

改变：

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

到

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

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

e.g。 <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 />

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

1 个答案: