angularjs initiating controller scope from a service

Question

I want to be able to preserve scope data between route changes, so I created a service to return saved data to a controller for it to initiate on scope.

app.factory('answerService', function () {
    var answers = {
        1 : { text : "first answer" },
        2 : { text : "second answer" }
    }
    return {
        getAllAnswers: function () {
            return answers;
        },
        getFirstAnswer: function () {
            return answers[1];
        }
    }
});

In my controller, I initiate the first answer by calling the service to get the first answer.

app.controller('myController', function ($scope, answerService) {
    $scope.firstAnswer = answerService.getFirstAnswer();    
    $scope.answers = answerService.getAllAnswers();
});

http://jsfiddle.net/hientc/gj5knrg7/2/

The problem I'm having is that $scope.firstAnswer is somehow also being binded to $scope.answers. I don't want that, I only want the input to bind to scope.firstAnswer.text

What am I doing wrong?

ryeballar · Accepted Answer · 2014-11-01 06:16:59Z

1

This is because answers[1] is an object reference, and assigning its value to another variable signifies that the variable is a reference to that object. In order to get a copy of that value you can copy it using angular.copy().

Simply change getFirstAnswer() function to something like this:

DEMO

getFirstAnswer: function () {
  return angular.copy(answers[1]);
}

edited Nov 1, 2014 at 6:16

answered Nov 1, 2014 at 5:58

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

Collectives™ on Stack Overflow

angularjs initiating controller scope from a service

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related