javascript - ng-click 没有触发工厂类

Question

我是 AngularJS 的新手。输入用户名和密码并单击登录按钮后，以下代码不会执行。登录应该执行登录方法并填充个人数据绑定(bind)对象。有人知道为什么不开火吗？谢谢。

工厂文件

'use strict';

var usermodule = angular.module('retrieveBasicUserInfo', [])
.factory('basicUserInfo', function($http) {

    var credentials = {
        username: '',
        password: ''
    };
    var person = "";

    $http.defaults.useXDomain = true;

    var getBasicUserInfo = function (credentials) {
        var inputdata = { "Logon": credentials.username, "Pass": credentials.password};
        $http.post('http://localhost:23034/api/wmsusers/login',JSON.stringify(inputdata),
           {
               headers: {
                   'Access-Control-Allow-Origin' : '*',
                   'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS, PUT',
                   'Content-Type': 'application/json',
                   'Accept': 'application/json'
               }
           }).success(function (inputdata) {
               person = inputdata[0];
           });
    };

    return {
        person: getBasicUserInfo
    };
});

JavaScript 文件

'use strict';

var usermodule = angular.module('wms', ['retrieveBasicUserInfo'])
    .controller('userAuthentication', ['basicUserInfo', function ($scope, basicUserInfo) {
        $scope.credentials = {
            username: '',
            password: ''
        };
        $scope.login = function (credentials) {
            console.log(credentials)
            $scope.person = basicUserInfo.getBasicUserInfo(credentials);
        }
    }]);

HTML 文件

<div data-ng-controller="userAuthentication">
<div class="login-panel">
    <p>Please complete the following form and click Login to continue:</p>
    <form name="loginForm" data-ng-submit="login(credentials)" novalidate>

        <label for="username">Username:</label>
        <input type="text" id="username"
               data-ng-model="credentials.username">

        <label for="password">Password:</label>
        <input type="password" id="password"
               data-ng-model="credentials.password">

        <button type="submit">Login</button>

    </form>
</div>
<br>
    <ul data-ng-model="$parent.person">
        <li>Name: {{person.Name}}</li>
        <li>Associate Id: {{person.Empid}}</li>
        <li>Access Level: {{person.Access}}</li>
    </ul>

Answer 1

请看这里http://jsbin.com/vaweja/2/edit .

您的工厂返回具有 person 属性的对象，并且在您的 Controller 中您试图访问 getBasicUserInfo，因此将 person 更改为 getBasicUserInfo。而且您在 Controller 定义中错过了 $scope

改变那个

return {
        person: getBasicUserInfo
    };

到

return {
        getBasicUserInfo: getBasicUserInfo
    };

和

var usermodule = angular.module('wms', ['retrieveBasicUserInfo'])
//and you missed $scope in line bellow after bracket
    .controller('userAuthentication', ['$scope','basicUserInfo', function ($scope, basicUserInfo) {
        $scope.credentials = {
            username: '',
            password: ''
        };
        $scope.login = function (credentials) {
            console.log(credentials)
            $scope.person = basicUserInfo.getBasicUserInfo(credentials);
        }
    }])

;