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 Aug 10 '16 at 08:08 — Dan M. CISSOKHO, Aug 10 '16 at 08:08
nop, there are no errors in my console – Harun Aug 10 '16 at 08:10 — Harun, Aug 10 '16 at 08:10

score 2 · Answer 1 · edited May 23 '17 at 12:00

2

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

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

edited May 23 '17 at 12:00

Community

1
1

answered Aug 10 '16 at 08:09

mesosteros

1,491
2
18
31

score 1 · Answer 2 · answered Aug 10 '16 at 08:16

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

score 0 · Answer 3 · answered Aug 10 '16 at 08:24

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

});

Angular JS services not working

3 Answers3