Angular JS：如何将Response从服务传递给控制器​​？

Question

我尝试从控制器中的服务处理成功/错误处理。

我试过这个：

服务：

$ #,##0.00" Test 0.00";[Red]$ -#,##0.00" Test 0.00"
$ #,##0.00" Test 0.00";[Red]$ -#,##0.00" Test 0.00"
$ #,##0.00" Test 0.00";[Red]$ -#,##0.00" Test 0.00"
$ #,##0.00" Test 0.00";[Red]$ -#,##0.00" Test 0.00"
$ #,##0.00" Test 0.00";[Red]$ -#,##0.00" Test 0.00"
$ #,##0.00%" Test 0.00";[Red]8" Test 0.00"
$ #,##0.00%" Test 0.00";[Red]8" Test 0.00"
"Test 0.0000"$ #,##0.00" Test 0.00";[Red]"Test 0.0000"$ -#,##0.00" Test 0.00"
"Test 0.0000"$ #,##0.00%" Test 0.00";[Red]"Test 0.0000"8" Test 0.00"
"Test 0.0000"$ #,##0.00%" Test 0.00";[Red]"Test 0.0000"8" Test 0.00"

和控制器：

.factory('AuthenticationService',
['Base64', '$http', '$cookieStore', '$rootScope',
function (Base64, $http, $cookieStore, $rootScope) {
    var service = {};

    service.Login = function (username, password, callback) {

        var authdata = Base64.encode(username + ':' + password);

        $rootScope.globals = {
            currentUser: {
                username: username,
                authdata: authdata
            }
        };

        $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; 
        $cookieStore.put('globals', $rootScope.globals);

        $http.post('http://localhost:8080/v1/login', { username: username, password: password })
            .success(function (response) {
                callback(response);
            });
    };

    service.ClearCredentials = function () {
        $rootScope.globals = {};
        $cookieStore.remove('globals');
        $http.defaults.headers.common.Authorization = 'Basic ';
    };

    return service;
}])

如果我尝试使用警报，它只会在服务中显示，但不会显示在控制器中。

Answer 1

尝试使用此

.factory('AuthenticationService',
['Base64', '$http', '$cookieStore', '$rootScope',
function (Base64, $http, $cookieStore, $rootScope) {
    var service = {};

    this.Login = function (username, password) {

        var authdata = Base64.encode(username + ':' + password);

        $rootScope.globals = {
            currentUser: {
                username: username,
                authdata: authdata
            }
        };

        $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; 
        $cookieStore.put('globals', $rootScope.globals);

        $http.post('http://localhost:8080/v1/login', { username: username, password: password })
            .success(function (response) {
                return response;
            });
    };

    this.ClearCredentials = function () {
        $rootScope.globals = {};
        $cookieStore.remove('globals');
        $http.defaults.headers.common.Authorization = 'Basic ';
    };
}])

控制器

.controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService',
function ($scope, $rootScope, $location, AuthenticationService) {
    // reset login status
    AuthenticationService.ClearCredentials();

    $scope.login = function () {
        $scope.dataLoading = true;
       var response = AuthenticationService.Login($scope.username, $scope.password);
        if(response.success) {
                $location.path('/');
            } else {
                $scope.error= response.message;
                $scope.dataLoading = false;
            } 
    };
}]);

Answer 2

使用承诺：

.factory('AuthenticationService',
['Base64', '$http', '$cookieStore', '$rootScope', '$q', 
function (Base64, $http, $cookieStore, $rootScope, $q) {
    var service = {};

    service.Login = function (username, password, callback) {

        var deferred = $q.defer();

        var authdata = Base64.encode(username + ':' + password);

        $rootScope.globals = {
            currentUser: {
                username: username,
                authdata: authdata
            }
        };

        $http.defaults.headers.common['Authorization'] = 'Basic ' + authdata; 
        $cookieStore.put('globals', $rootScope.globals);

        $http.post('http://localhost:8080/v1/login', { username: username, password: password })
            .then(function (response) {
                deferred.resolve(response);
            }, function(error) {
                deferred.reject(error);
            });

        return deferred.promise;
    };

    service.ClearCredentials = function () {
        $rootScope.globals = {};
        $cookieStore.remove('globals');
        $http.defaults.headers.common.Authorization = 'Basic ';
    };

    return service;
}])

和你的控制器

.controller('LoginController',
['$scope', '$rootScope', '$location', 'AuthenticationService',
function ($scope, $rootScope, $location, AuthenticationService) {
    // reset login status
    AuthenticationService.ClearCredentials();

    $scope.login = function () {
        $scope.dataLoading = true;
        AuthenticationService.Login($scope.username, $scope.password)
            .then(function(success) {
                $location.path('/');
            }, function(error) {
                $scope.error= response.message;
                $scope.dataLoading = false;
            });
    };
}]);

Answer 3

由于$ http服务已经返回一个承诺，因此无需使用$q.defer()制作承诺。避免使用此Q Defer Anti-Pattern。

//AVOID this $q.defer ANTI-PATTERN 
var deferred = $q.defer();

$http.post('http://localhost:8080/v1/login', { username: username, password: password })
    .then(function (response) {
        deferred.resolve(response);
    }, function(error) {
        deferred.reject(error);
    });

return deferred.promise;

而是简单地使用$ http服务返回的承诺：

//INSTEAD return promise from $http

var promise = $http.post('http://localhost:8080/v1/login', { username: username, password: password });

return promise;