Injizieren von $ scope in eine angular Servicefunktion ()

Anstatt zu versuchen, den $scope Innerhalb des Dienstes zu ändern, können Sie einen $watch In Ihrem Controller implementieren, um eine Eigenschaft Ihres Dienstes auf Änderungen zu überwachen und dann eine Eigenschaft auf dem $scope. Hier ist ein Beispiel, das Sie in einem Controller ausprobieren könnten:

angular.module('cfd')
    .controller('MyController', ['$scope', 'StudentService', function ($scope, StudentService) {

        $scope.students = null;

        (function () {
            $scope.$watch(function () {
                return StudentService.students;
            }, function (newVal, oldVal) {
                if ( newValue !== oldValue ) {
                    $scope.students = newVal;
                }
            });
        }());
    }]);

Damit die Eigenschaft students in Ihrem Service sichtbar ist, muss sie sich auf dem Service-Objekt oder this wie folgt befinden:

this.students = $http.get(path).then(function (resp) {
  return resp.data;
});

Nun (eine lange) ... wenn Sie darauf bestehen $scope Zugriff auf einen Dienst zu haben, können Sie:

Erstellen Sie einen Get-/Setter-Service

ngapp.factory('Scopes', function (){
  var mem = {};
  return {
    store: function (key, value) { mem[key] = value; },
    get: function (key) { return mem[key]; }
  };
});

Injizieren Sie es und speichern Sie den Controller-Bereich darin

ngapp.controller('myCtrl', ['$scope', 'Scopes', function($scope, Scopes) {
  Scopes.store('myCtrl', $scope);
}]);

Holen Sie sich jetzt den Gültigkeitsbereich in einen anderen Dienst

ngapp.factory('getRoute', ['Scopes', '$http', function(Scopes, $http){
  // there you are
  var $scope = Scopes.get('myCtrl');
}]);

Dienste sind Singletons, und es ist nicht logisch, dass ein Bereich in den Dienst eingefügt wird (was in der Tat der Fall ist, dass Sie keinen Bereich in den Dienst einfügen können). Sie können scope als Parameter übergeben, aber das ist auch eine schlechte Wahl für das Design, da der Gültigkeitsbereich an mehreren Stellen bearbeitet werden müsste, was das Debuggen erschwert. Der Code für den Umgang mit Bereichsvariablen sollte im Controller gespeichert werden, und Serviceaufrufe werden an den Service gesendet.

Sie können Ihrem Dienst den Bereich vollständig entziehen, in Ihrem Controller jedoch die asynchrone Aktualisierung des Bereichs zulassen.

Das Problem besteht darin, dass Sie nicht wissen, dass http-Aufrufe asynchron ausgeführt werden, was bedeutet, dass Sie nicht sofort einen Wert erhalten, wie Sie es könnten. Zum Beispiel,

var students = $http.get(path).then(function (resp) {
  return resp.data;
}); // then() returns a promise object, not resp.data

Es gibt eine einfache Möglichkeit, dies zu umgehen und eine Rückruffunktion bereitzustellen.

.service('StudentService', [ '$http',
    function ($http) {
    // get some data via the $http
    var path = '/students';

    //save method create a new student if not already exists
    //else update the existing object
    this.save = function (student, doneCallback) {
      $http.post(
        path, 
        {
          params: {
            student: student
          }
        }
      )
      .then(function (resp) {
        doneCallback(resp.data); // when the async http call is done, execute the callback
      });  
    }
.controller('StudentSaveController', ['$scope', 'StudentService', function ($scope, StudentService) {
  $scope.saveUser = function (user) {
    StudentService.save(user, function (data) {
      $scope.message = data; // I'm assuming data is a string error returned from your REST API
    })
  }
}]);

Die Form:

<div class="form-message">{{message}}</div>

<div ng-controller="StudentSaveController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="saveUser(user)" value="Save" />
  </form>
</div>

Dadurch wurde ein Teil Ihrer Geschäftslogik der Kürze halber entfernt, und ich habe den Code noch nicht getestet, aber so etwas würde funktionieren. Das Hauptkonzept besteht darin, einen Rückruf von der Steuerung an den Dienst zu übergeben, der später in der Zukunft aufgerufen wird. Wenn Sie mit NodeJS vertraut sind, ist dies das gleiche Konzept.

Bin in die gleiche Situation geraten. Am Ende hatte ich Folgendes. Hier injiziere ich also nicht das Scope-Objekt in die Fabrik, sondern setze das $ scope im Controller selbst unter Verwendung des Konzepts von Versprechen von $ http zurückgegeben.

(function () {
    getDataFactory = function ($http)
    {
        return {
            callWebApi: function (reqData)
            {
                var dataTemp = {
                    Page: 1, Take: 10,
                    PropName: 'Id', SortOrder: 'Asc'
                };

                return $http({
                    method: 'GET',
                    url: '/api/PatientCategoryApi/PatCat',
                    params: dataTemp, // Parameters to pass to external service
                    headers: { 'Content-Type': 'application/Json' }
                })                
            }
        }
    }
    patientCategoryController = function ($scope, getDataFactory) {
        alert('Hare');
        var promise = getDataFactory.callWebApi('someDataToPass');
        promise.then(
            function successCallback(response) {
                alert(JSON.stringify(response.data));
                // Set this response data to scope to use it in UI
                $scope.gridOptions.data = response.data.Collection;
            }, function errorCallback(response) {
                alert('Some problem while fetching data!!');
            });
    }
    patientCategoryController.$inject = ['$scope', 'getDataFactory'];
    getDataFactory.$inject = ['$http'];
    angular.module('demoApp', []);
    angular.module('demoApp').controller('patientCategoryController', patientCategoryController);
    angular.module('demoApp').factory('getDataFactory', getDataFactory);    
}());

Der Code für den Umgang mit Bereichsvariablen sollte im Controller gespeichert werden, und Serviceaufrufe werden an den Service gesendet.

Sie können $rootScope Eingeben, um $rootScope.$broadcast Und $rootScope.$on Zu verwenden.

Vermeiden Sie andernfalls die Injektion von $rootScope. Sehen

• Häufige Fallstricke: $rootScope Existiert, kann aber für das Böse verwendet werden .