Angular JS - 从服务接收信息

Question

所以我现在有一个正常运行的控制器和服务对，但是我的老板要我将成功/错误/最终块从控制器移动到服务。

控制器功能：

            $scope.createUserButton = function () {
                $scope.isBusy = true;
                creationService.makeNewUser($scope.form)
                .success(function (data) {
                    var user = JSON.parse(data);
                    if (typeof user !== 'undefined') {
                        $scope.testusers.push(user);
                    }

                }).error(function () {
                    notify({
                        message: 'Could not create user',
                        classes: 'alert-danger',
                        templateUrl: 'partials/settingNotification.html'
                    });
                }).finally(function () {
                    $scope.isBusy = false;
                });
            };

服务：

service('creationService', ['restfulRepo', '$http',
function (restfulRepo, $http) {
this.makeNewUser = function (tempuser) {
    return $http({
        url: 'http://localhost:60098/***/*************/******',
        data: tempuser, method: 'PUT'
    });
};
}]);

我遇到的问题是，如果我将成功或最终阻止移动到服务，那么他们就无法访问isBusy标志或testusers数组。该数组绑定到控制器中的图形，该图形显示回传的信息。

Answer 1

通过我的回复，您可以让数据绑定为您缓解这种情况。请注意我们如何设置控制器和放大器。 service isBusy变量。

控制器：

$scope.isBusy = creationService.isBusy; //1-way Data Binding
$scope.createUserButton = function () {
            creationService.isBusy = true;
            creationService.makeNewUser($scope.form).then(
                    function(user){
                       $scope.testusers.push(user);
                    }, function(error){
                       notify({
                       message: error,
                       classes: 'alert-danger',
                       templateUrl: 'partials/settingNotification.html'
                       });
                    });

        };

服务：

service('creationService', ['restfulRepo', '$http', '$q', function (restfulRepo, $http, $q) {
this.isBusy = false;

this.makeNewUser = function (tempuser) {
var defer = $q.defer();
  $http({
    url: 'http://localhost:60098/***/*************/******',
    data: tempuser, method: 'PUT'
  }).success(function (data) {
                var user = JSON.parse(data);
                if (typeof user !== 'undefined') {
                    defer.resolve(user);
                }else{
                   defer.reject("Undefined user");
                }
            }).error(function () {
                defer.reject('Could not create user');
            }).finally(function () {
                this.isBusy = false;
            });
     return defer.promise;
  };
}]);

Answer 2

取决于服务的职责。如果您将服务视为与服务器通信的一种方式，则可以使用此示例。

控制器负责从服务中获取数据并对其执行某些操作，例如将其绑定到视图或显示错误消息。

<强>服务

service('creationService', ['restfulRepo', '$http',
    function (restfulRepo, $http) {
        this.makeNewUser = function (tempuser) {
            return $http({
                url: 'http://localhost:60098/***/*************/******',
                data: tempuser, method: 'PUT'
            }).then(function(){
                var user = JSON.parse(data);
                return user;
            }, function(e){
                //check server error response e to send the correct object to the controller
                throw {
                    message: 'Could not create user',
                    classes: 'alert-danger',
                    templateUrl: 'partials/settingNotification.html'
                };
            });
        };
    }]);

<强>控制器：

$scope.createUserButton = function () {
    $scope.isBusy = true;
    creationService.makeNewUser($scope.form)
        .then(function (user) {
            if (typeof user !== 'undefined') {
                $scope.testusers.push(user);
            }
        }, function (e) {
            notify(e);
        })
        .finally(function () {
            $scope.isBusy = false;
        });
};

Answer 3

相关：Injecting $scope into an angular service function()

how do i pass scope from controller to service in angularjs?

最好将数据testusers和isBusy布尔值移动到服务中。这样，所有其他控制器都可以访问testusers并由isBusy变量控制。

<强>服务

service('creationService', ['restfulRepo', '$http',
function (restfulRepo, $http) {
this.testusers = []; // do whatever you want with it
this.isBusy = false;
this.makeNewUser = function (tempuser) {
    return $http({
        url: 'http://localhost:60098/***/*************/******',
        data: tempuser, method: 'PUT'
    });
};
this.toggleBusy = function(){
    this.isBusy = this.isBusy ? false : true;
};
this.createUserErr = function () {
                notify({
                    message: 'Could not create user',
                    classes: 'alert-danger',
                    templateUrl: 'partials/settingNotification.html'
                };
this.createUserSuc = function (data) {
                var user = JSON.parse(data);
                if (typeof user !== 'undefined') {
                    this.testusers.push(user);
                }

            }

}]);

<强>控制器

        $scope.createUserButton = function () {
            creationService.toggleBusy();
            creationService.makeNewUser(creationService.createUserSuc)
            .success().error(creationService.createUserErr);
            }).finally(creationService.toggleBusy);
        };