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']; 来不及了。