Angular JS - Empfangen von Informationen von einem Service

Question

Also habe ich ein Controller und Service-Paar, die gerade richtig funktionieren, aber mein Chef möchte, dass ich die Erfolg/Fehler/schließlich blockiert von der Steuerung auf den Dienst.

Controller-Funktion:

  $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:

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

Das Problem, das ich habe, ist, dass, wenn ich den Erfolg oder blockiert schließlich in den Dienst zu bewegen, dann haben sie nicht Zugriff auf das IsBusy-Flag oder auf das Testusers-Array. Das Array ist an ein Diagramm im Controller gebunden, das die zurückgegebenen Informationen anzeigt.

Answer 1

Mit meiner Antwort, können Sie Daten lassen, dass für Sie bindend lindern. Beachten Sie, wie wir den Controller & Service isBusy Variablen einstellen.

Controller:

$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:

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

Hängt davon ab, welche Verantwortung der Dienst hat. Dies ist ein Beispiel, wenn Sie Ihren Dienst nur als eine Möglichkeit betrachten, mit einem Server zu sprechen.

Und der Controller ist dafür verantwortlich, nur die Daten vom Service zu bekommen und etwas damit zu tun, wie es an die Ansicht zu binden oder eine Fehlermeldung zu zeigen.

Service:

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

Controller:

$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

Verwandte: Injecting $scope into an angular service function()

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

Es ist vielleicht am besten, wenn Sie sowohl Ihre Daten testusers als auch die isBusy Boolean zum Dienst verschieben. Auf diese Weise können alle anderen Controller auf testusers zugreifen und durch die Variable isBusy gesteuert werden.

Dienst

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

      } 

}]); 

-Controller

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