ng-click未使用工廠類觸發

Question

我是AngularJS的新手。 輸入用戶名和密碼並單擊登錄按鈕后，以下代碼未執行。 登錄名應執行login方法並填充人員數據綁定對象。 有人知道為什么不射擊嗎？ 謝謝。

工廠檔案

'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屬性的對象，並且在您的控制器中，您試圖到達getBasicUserInfo，因此將person更改為getBasicUserInfo。 而且您在控制器定義中錯過了$ 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);
        }
    }])

;