AngularJs從控制器調用服務功能未定義

Question

我正在嘗試從數據服務工廠調用函數，但會引發錯誤無法讀取未定義的屬性“登錄”

這是我的數據服務工廠

(function(){
  'use strict';
  // dataservice factory
 angular
.module('app')
.factory('dataservice', dataservice);

 dataservice.$inject = ['$http'];

 function dataservice($http) {

  return {
    login  : login
  }


function login(username, password, callback) {
    $http.post('/data', { username: username, password: password })
        .success(function (response) {
          console.log(response);
       });
    }  
 }
})();

這是我的控制器

(function(){

'use strict';

angular
  .module('app')
  .controller('TestController', TestController);

TestController.$inject = ['dataservice'];

function TestController(dataservice) { 

  var vm = this;

  vm.login = login;



function login() {
console.log('is this called?');
    vm.loading = true;
    dataservice.login(vm.username, vm.password, function (result) {
        console.log(result);
    });
 }

 }
})();

登錄函數，當我從view按下login時被調用，因為我得到： 這叫嗎？ 在我的控制台中 。

Answer 1

您需要在then塊中糾正回調

function login() {
    console.log('is this called?');
    vm.loading = true;
    dataservice.login(vm.username, vm.password).then(function (result) {
        console.log(result);
    }, function(error){
    });
 }

這是正確的語法。

您也可以使用此服務語法

   function login(){
        var d = $q.defer();
        $http({
            method: 'POST',
            url: '/data',
            data:{
                username : username,
                password : password
            }
        }).success(function(response){
            d.resolve(response);
        }).error(function(response){
            d.reject(response);
        });
        return d.promise;
    }

Answer 2

我已將您的示例更正為更通用和易讀的語法。 檢查這個小提琴 ，看看它的作用。

(function () {
    'use strict';
    // dataservice factory
    var app = angular.module('app', []);
    app.factory('dataservice', ['$http', function ($http) {

        function login(username, password, callback) {
            console.log('Login in dataservice...');
            $http.post('/data', {username: username, password: password})
                .then(function (response) {
                    console.log(response);
                }, function (error) {
                    console.warn(error);
                });
        }

        return {
            login: login
        };

    }]);

    app.controller('TestController', ['dataservice', function (dataservice) {
        var vm = this;
        vm.login = login;
        function login() {
            console.log('is this called?');
            vm.loading = true;
            dataservice.login(vm.username, vm.password, function (result) {
                console.log(result);
            });
        }
    }]);
})
();

1. 您應該將第二個參數作為一個空數組傳遞給app.module（如果您對其他模塊沒有依賴性）
2. 使用$ http.then，因為描述了.success。
3. 將第二個參數作為具有相關性和功能列表的數組傳遞給app.factory或app.controller。 在您的示例中，您沒有注入任何依賴項，因為TestController。$ inject = ['dataservice']; 來不及了。