angularjs - Injecting $scope into an angular service function() -


i have service:

angular.module('cfd')   .service('studentservice', [ '$http',     function ($http) {     // data via $http     var path = 'data/people/students.json';     var students = $http.get(path).then(function (resp) {       return resp.data;     });          //save method create new student if not exists     //else update existing object     this.save = function (student) {       if (student.id == null) {         //if new student, add in students array         $scope.students.push(student);       } else {         //for existing student, find student using id         //and update it.         (i in students) {           if (students[i].id == student.id) {             students[i] = student;           }         }       }     }; 

but when call save(), don't have access $scope, , referenceerror: $scope not defined. logical step (for me), provide save() $scope, , must provide/inject service. if so:

  .service('studentservice', [ '$http', '$scope',                       function ($http, $scope) { 

i following error:

error: [$injector:unpr] unknown provider: $scopeprovider <- $scope <- studentservice

the link in error (wow neat!) lets me know injector related, , might have order of declaration of js files. have tried reordering them in index.html, think more simple, such way injecting them.

using angular-ui , angular-ui-router

the $scope see being injected controllers not service (like rest of injectable stuff), scope object. many scope objects can created (usually prototypically inheriting parent scope). root of scopes $rootscope , can create new child-scope using $new() method of scope (including $rootscope).

the purpose of scope "glue together" presentation , business logic of app. not make sense pass $scope service.

services singleton objects used (among other things) share data (e.g. among several controllers) , encapsulate reusable pieces of code (since can injected , offer "services" in part of app needs them: controllers, directives, filters, other services etc).

i sure, various approaches work you. 1 this:
since studentservice in charge of dealing student data, can have studentservice keep array of students , let "share" whoever might interested (e.g. $scope). makes more sense, if there other views/controllers/filters/services need have access info (if there aren't right now, don't surprised if start popping soon).
every time new student added (using service's save() method), service's own array of students updated , every other object sharing array automatically updated well.

based on approach described above, code this:

angular.module('cfd', [])  .factory('studentservice', ['$http', function ($http) {     var path = 'data/people/students.json';     var students = [];      /* in real app, instead of updating students array      * (which done controller)      * method should send student data server */     var save = function (student) {         if (student.id === null) {             students.push(student);         } else {             (var = 0; < students.length; i++) {                 if (students[i].id === student.id) {                     students[i] = student;                     break;                 }             }         }     };      /* populate students array students server */     $http.get(path).success(function (data) {         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) {             // $scope-specific stuff              // actual saving using studentservice             studentservice.save(student);             // $scope's `students` array automatically updated             // since references studentservice's `students` array              // more $scope-specific stuff,              // e.g. show notification          };     } ]); 

1 thing should careful when using approach never re-assign service's array, because other components (e.g. scopes) still referencing original array , app break.
e.g. clear array in studentservice:

/* don't   */   var clear = function () { students = []; }  /* instead */   var clear = function () { students.splice(0, students.length); } 

see, also, short demo.


little update:

a few words avoid confusion may arise while talking using service, not creating service() function.

quoting docs on $provide:

an angular service singleton object created service factory. these service factories functions which, in turn, created service provider. service providers constructor functions. when instantiated must contain property called $get, holds service factory function.
[...]
...the $provide service has additional helper methods register services without specifying provider:

  • provider(provider) - registers service provider $injector
  • constant(obj) - registers value/object can accessed providers , services.
  • value(obj) - registers value/object can accessed services, not providers.
  • factory(fn) - registers service factory function, fn, wrapped in service provider object, $get property contain given factory function.
  • service(class) - registers constructor function, class wrapped in service provider object, $get property instantiate new object using given constructor function.

basically, says every angular service registered using $provide.provider(), there "shortcut" methods simpler services (two of service() , factory()).
"boils down" service, doesn't make difference method use (as long requirements service can covered method).

btw, provider vs service vs factory 1 of confusing concepts angular new-comers, fortunately there plenty of resources (here on so) make things easier. (just search around.)

(i hope clears - let me know if doesn't.)


Comments

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

javascript - Using Windows Media Player as video fallback for video tag -

c# - Unity IoC Lifetime per HttpRequest for UserStore -