Angularjs - Service doesn't store data between controllers

Question

I've got a problem in my angular application which is service, a factory, for storing data between controllers. In one view I'm pushing objects to a list and I'm sure it proceeds, but whenever I go to another view (with a new controller) the list is empty.

services.js

'use strict';

var services = angular.module('services', ['ngResource']);

services.factory('participants',  function () {
    var participants = {};

    participants.list = [];

    participants.add = function(name, sirName, email, answer){
        participants.list.push({name: name, sirName: sirName, email: email, answer: answer});
    };

    return participants;
});

controllers.js

    'use strict';

    var cont = angular.module('controllers', ['services']);


    cont.controller('lottery1Ctrl', ['$scope', 'participants', '$location', '$log',
                                     function ($scope, participants, $location) {
                                         $scope.content = "[Waiting for File]";
                                         this.showFileContent = function(fileContent){
                                             $scope.$apply((function(controller){
                                                 return function(){
                                                     controller.content = fileContent;
                                                     $scope.csvToJson(fileContent);
                                                 };
                                             })(this));
                                         };

                                         $scope.checkParticipants = function () {
                                             if(participants.list.length == 0){
                                                 alert("Wgraj plik CSV")
                                             }
                                             else
                                                 $location.path('/lottery/2');
                                         };

                                         $scope.csvToJson = function (text) {
                                             var lines = text.split("\n");

                                             for (var i = 1; i < lines.length; i++) {
                                                 var currentLine = lines[i].split(",");

                                                 var answer = currentLine[0];
                                                 var name = currentLine[1];
                                                 var sirName = currentLine[2];
                                                 var email = currentLine[3];
                                                 participants.add(name, sirName, email, answer);
                                             }
                                         };
                                     }]);

    cont.controller('lottery2Ctrl', ['$scope', 'participants', '$log',
                                 function ($scope, $log, participants) {
                                     $scope.getTotalParticipants = function () {
                                         $log.log(participants.list.length);
                                         return participants.list.length;
                                     };
                                 }]);
cont.controller('ListCtrl', ['$scope', 'participants',
                                 function (participants) {
                                     var self = this;
                                     self.participants = participants.list;
                                 }]);

login2.html

<h3>Participants number: {{getTotalParticipants()}}</h3>
        <div ng-controller="ListCtrl as list">
            <p ng-repeat="participant in participants.list">{{ participant.name }}: {{ participant.sirName }}: {{ participant.email }}: {{ participant.answer }}</p>
        </div>

Output shows nothing but :::, and whenever I try to get length value of a list I get an error "cannot read property 'length' of undefined"

Thanks in advance!

chairmanmow · Accepted Answer · 2016-05-28 00:09:13Z

1

I don't see anywhere where your list of participants is passed up to $scope object which is where you can bind it in your html or reference it from ng-repeat. While I can't comment on your entire program, it seems to me that you need to make a declaration in your controller such as :

    $scope.participants = [];

and then you should add your participants to that array. Try putting this in your code and see if it displays the dummy values on your web page, if so you probably need to tweek your functions so that array gets populated in your controller :

    $scope.participants = [{name:'Test1'},{name:'Test2'}];

answered May 28, 2016 at 0:09

chairmanmow

6507 silver badges20 bronze badges

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

1 Comment

Kamil Over a year ago

this plus subtle change in the way I iterated over my list worked great (participants instead of participants.list). thanks!

Collectives™ on Stack Overflow

Angularjs - Service doesn't store data between controllers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related