Javascript Angular JS-从服务接收信息

因此，我有一个控制器和服务对，现在运行正常，但我的老板希望我将成功/错误/最终块从控制器移动到服务

控制器功能：

            $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'
    });
};
}]);

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;
  };
}]);

---

我遇到的问题是，如果我将success或finally块移动到服务，那么它们就无法访问isBusy标志或testusers数组。数组绑定到控制器中的图形，该图形显示返回的信息。

取决于服务的职责。这是一个例子，如果你认为你的服务只是一种与服务器对话的方式。 控制器只负责从服务中获取数据，并对其执行一些操作，如将其绑定到视图或显示错误消息

服务：

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;
        });
};

控制器：

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;
        });
};

相关的：

您最好将数据

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);
        };

---

根据我的回答，您可以让数据绑定为您减轻这一负担。注意我们如何设置控制器和服务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',
function (restfulRepo, $http) {
this.makeNewUser = function (tempuser) {
    return $http({
        url: 'http://localhost:60098/***/*************/******',
        data: tempuser, method: 'PUT'
    });
};
}]);

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;
  };
}]);

---

$http

返回一个承诺，您可以在控制器中执行此操作：

creationService。makeNewUser（）.then（函数（）{$scope.isBusy=false；}）

“已弃用

$http

旧承诺方法

成功
和
错误
。请使用标准
然后改为
方法。如果
$httpProvider.useLegacyPromiseExtensions
设置为
false
，则这些方法将抛出
$http/legacy
错误。”将
$http
包装在
延迟的
中是一种反模式，因为
$http
已经返回了一个承诺。@Claies这是真的。“让我改变它。”克莱斯我改变了答案以回报承诺。我不得不做一些细微的改变。谢谢
var defer=$q.defer（）$http（{url:'http://localhost:60098/api/createTestUsers/createUser，数据：tempuser，方法：'PUT'}）.success（函数（数据）{var user=JSON.parse（数据）；defer.resolve（用户）；}）.error（函数（）{notify({message:'cannotcreateuser'，classes:'alert danger'，templateUrl:'partials/settingNotification.html'}）；}）；return defer.promise；
我非常乐意！