Injecting scope into an angular service function

Question

I have a Service   angular module  cfd      service  StudentService       http       function   http           get some data via the  http     var path    data people students json       var students    http get path  then function  resp          return resp data                     save method create a new student if not already exists       else update the existing object     this save   function  student          if  student id    null              if this is new student  add it in students array          scope students push student           else             for existing student  find this student using id           and update it          for  i in students              if  students i  id    student id                students i    student                                         But when I call save    I don t have access to the  scope  and get ReferenceError   scope is not defined  So the logical step  for me   is to provide save   with the  scope  and thus I must also provide inject it to the service   So if I do that like so      service  StudentService       http     scope                         function   http   scope      I get the following error       Error    injector unpr  Unknown provider   scopeProvider  lt -  scope  lt -   StudentService   The link in the error  wow that is neat   lets me know it is injector related  and might have to do with order of declaration of the js files    I have tried reordering them in the index html  but I think it is something more simple  such as the way I am injecting them   Using Angular-UI and Angular-UI-Router

User · Answer

You could make your service completely unaware of the scope, but in your controller allow the scope to be updated asynchronously.

The problem you're having is because you're unaware that http calls are made asynchronously, which means you don't get a value immediately as you might. For instance,

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

There's a simple way to get around this and it's to supply a callback function.

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

The 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>

This removed some of your business logic for brevity and I haven't actually tested the code, but something like this would work. The main concept is passing a callback from the controller to the service which gets called later in the future. If you're familiar with NodeJS this is the same concept.

User · Answer

Got into the same predicament  I ended up with the following  So here I am not injecting the scope object into the factory  but setting the  scope in the controller itself using the concept of promise returned by  http service    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

User · Answer

Well  a long one      if you insist to have  scope access inside a service  you can   Create a getter setter service  ngapp factory  Scopes   function       var mem         return       store  function  key  value    mem key    value         get  function  key    return mem key                Inject it and store the controller scope in it  ngapp controller  myCtrl      scope    Scopes   function  scope  Scopes      Scopes store  myCtrl    scope          Now  get the scope inside another service  ngapp factory  getRoute     Scopes     http   function Scopes   http        there you are   var  scope   Scopes get  myCtrl

User · Answer

Instead of trying to modify the  scope within the service  you can implement a  watch within your controller to watch a property on your service for changes and then update a property on the  scope  Here is an example you might try in a controller   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                                                             One thing to note is that within your service  in order for the students property to be visible  it needs to be on the Service object or this like so   this students    http get path  then function  resp      return resp data

User · Answer

Services are singletons  and it is not logical for a scope to be injected in service  which is case indeed  you cannot inject scope in service   You can pass scope as a parameter  but that is also a bad design choice  because you would have scope being edited in multiple places  making it hard for debugging  Code for dealing with scope variables should go in controller  and service calls go to the service

User · Answer

Code for dealing with scope variables should go in controller  and service calls go to the service   You can inject  rootScope for the purpose of using  rootScope  broadcast and  rootScope  on   Otherwise avoid injecting  rootScope  See    Common Pitfalls   rootScope exists  but it can be used for evil

User · Answer

The  scope that you see being injected into controllers is not some service  like the rest of the injectable stuff   but is a Scope object  Many scope objects can be created  usually prototypically inheriting from a parent scope   The root of all scopes is the  rootScope and you can create a new child-scope using the  new   method of any scope  including the  rootScope     The purpose of a Scope is to  glue together  the presentation and the business logic of your app  It does not make much sense to pass a  scope into a service   Services are singleton objects used  among other things  to share data  e g  among several controllers  and generally encapsulate reusable pieces of code  since they can be injected and offer their  services  in any part of your app that needs them  controllers  directives  filters  other services etc    I am sure  various approaches would work for you  One is this  Since the StudentService is in charge of dealing with student data  you can have the StudentService keep an array of students and let it  share  it with whoever might be interested  e g  your  scope   This makes even more sense  if there are other views controllers filters services that need to have access to that info  if there aren t any right now  don t be surprised if they start popping up soon   Every time a new student is added  using the service s save   method   the service s own array of students will be updated and every other object sharing that array will get automatically updated as well   Based on the approach described above  your code could look like this   angular    module  cfd           factory  StudentService      http     q   function   http   q        var path    data people students json       var students               In the real app  instead of just updating the students array         which will be probably already done from the controller         this method should send the student data to the server and        wait for a response         This method returns a promise to emulate what would happen         when actually communicating with the server      var save   function  student          if  student id     null            students push student           else           for  var i   0  i  lt  students length  i                if  students i  id     student id                students i    student              break                                       return  q resolve student                  Populate the students array with students from the server       http get path  then function  response          response data forEach function  student            students push student                          return         students  students        save  save                       controller  someCtrl      scope    StudentService        function   scope  StudentService           scope students   StudentService students         scope saveStudent   function  student               Do some  scope-specific stuff                Do the actual saving using the StudentService             Once the operation is completed  the  scope s  students             array will be automatically updated  since it references            the StudentService s  students  array          StudentService save student  then function                   Do some more  scope-specific stuff                e g  show a notification             function  err                 Handle the error                                      One thing you should be careful about when using this approach is to never re-assign the service s array  because then any other components  e g  scopes  will be still referencing the original array and your app will break  E g  to clear the array in StudentService        DON T DO THAT        var clear   function      students             DO THIS INSTEAD      var clear   function      students splice 0  students length         See  also  this short demo     LITTLE UPDATE   A few words to avoid the confusion that may arise while talking about using a service  but not creating it with the service   function   Quoting the docs on  provide      An Angular service is a singleton object created by a service factory  These service factories are functions which  in turn  are created by a service provider  The service providers are constructor functions  When instantiated they must contain a property called  get  which holds the service factory function               the  provide service has additional helper methods to register services without specifying a provider            provider provider  - registers a service provider with the  injector   constant obj  - registers a value object that can be accessed by providers and services      value obj  - registers a value object that can only be accessed by services  not providers      factory fn  - registers a service factory function  fn  that will be wrapped in a service provider object  whose  get property will contain the given factory function      service class  - registers a constructor function  class that will be wrapped in a service provider object  whose  get property will instantiate a new object using the given constructor function       Basically  what it says is that every Angular service is registered using  provide provider    but there are  shortcut  methods for simpler services  two of which are service   and factory     It all  boils down  to a service  so it doesn t make much difference which method you use  as long as the requirements for your service can be covered by that method    BTW  provider vs service vs factory is one of the most confusing concepts for Angular new-comers  but fortunately there are plenty of resources  here on SO  to make things easier   Just search around     I hope that clears it up - let me know if it doesn t

[angularjs] Injecting $scope into an angular service function()

Examples related to angularjs

Examples related to angular-ui

Examples related to angular-ui-router