Angular JS services not working

Question

so i am kinda new to angularjs and is facing a little difficulty with services. so i was working on an angularjs TO DO app and with services and can not get it working. This is my controller

.controller("myController", ['$scope','toDoService', function($scope,toDoService){

    var lists = toDoService.getLists();
    $scope.lists = lists;

    $scope.add = function(){
      // WHAT TO PUT HERE????

    }

and this is my service

 .service('toDoService', function(){
      this.getLists =function(){
          var list = [
              {"name" : "abebe" ,"done":false, id: Date.now()}
          ];
          return list;
      }


      this.add = function(){
         $scope.lists.push({'name':$scope.nameSpace,'done':false, id: Date.now()});
      $scope.nameSpace = '';
         return this;
      }

  });

THANK YOU IN ADVANCE

do you have any error ?

Dan M. CISSOKHO
– Dan M. CISSOKHO

2016-08-10 08:08:11 +00:00
Commented Aug 10, 2016 at 8:08 — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Aug 10, 2016 at 8:08
nop, there are no errors in my console

Harun
– Harun

2016-08-10 08:10:00 +00:00
Commented Aug 10, 2016 at 8:10 — Harun
– Harun, Commented Aug 10, 2016 at 8:10

Community · Accepted Answer · 2017-05-23 12:00:59Z

2

You can't use $scope inside a service like this.

See this answer: https://stackoverflow.com/a/22899880/3619813

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Aug 10, 2016 at 8:09

mesosteros

1,5192 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arif · Accepted Answer · 2016-08-10 08:16:27Z

You can not use $scope inside service. Check the Fiddle to understand how it should work.

myApp.service('toDoService', function(){
            this.details = {
        lists: [
              {"name" : "abebe" ,"done":false, id: Date.now()}
          ]
      }
      this.getLists =function(){
          var list = [
              {"name" : "abebe" ,"done":false, id: Date.now()}
          ];
          return list;
      }
      this.addList = function(item) {
        this.details.lists.push(item)
      }
  });

myApp.controller("myController", ['$scope','toDoService',       
    function($scope,toDoService){
    $scope.lists = function() { return toDoService.details.lists };
    $scope.add = function(){
      // WHAT TO PUT HERE????
      var newListItem = {"name" : "abebe" ,"done":false, id: Date.now()}
      toDoService.addList(newListItem)
    }
}]);

Alvin Saldanha · Accepted Answer · 2016-08-10 08:24:10Z

0

Below is the complete code.

.controller("myController", ['$scope','toDoService', function($scope,toDoService){

var lists = toDoService.getLists();
$scope.lists = lists;

$scope.add = function(){
    toDoService.add($scope.lists);

}

Your service will look like below.

.service('toDoService', function(){

    this.lists = [];

    this.getLists =function(){
        var list = [
            {"name" : "abebe" ,"done":false, id: Date.now()}
        ];
        return list;
    }


    this.add = function(data){
        lists.push(data);
        return lists;
    }

});

answered Aug 10, 2016 at 8:24

Alvin Saldanha

91610 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular JS services not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related