AngularJS service object is not being updated across views/controllers

Question

I have a factory, "itemData", that holds a service.

 app.factory('itemData', function () {

     var itemData = {

         Title: 'I should be different',

         getTitle: function () {
             return itemData.Title;
         },

         setTitle: function (title) {
             return itemData.Title=title;
         },

         // This is the function to call all of the sets for the larger object
         editItem: function (entry)
         {
            itemData.setTitle(entry);
         }


     };

     return itemData;

 });

I have 2 controllers (in different files) associated with 2 separate views. The first:

 // IndexCtrl
 app.controller("IndexCtrl", ['$scope','$window','itemData',

     function($scope, $window, itemData) {
         var entry = "I'm different";

         // After a submit is clicked
         $scope.bttnClicked = function (entry) {

             itemData.editItem(entry);
             console.log(itemData.getTitle();  //<--itemData.Title has changed

             // moves to page with other controller
             $window.location.href = "edit.html";

        };

     }

]);

and the second, which is not doing what I want:

 app.controller("editItemCtrl", ['$scope', '$window', 'itemData', 

     function ($scope, $window, itemData){

         $scope.item = {

            "Title": itemData.getTitle(), //<--- Title is "I should be different"
         } 

 }]);

Please pay more attention to whitespace when pasting in code. This was really hard to follow in its original form. — Conspicuous Compiler
– Conspicuous Compiler, Commented Mar 8, 2016 at 22:56
@ConspicuousCompiler Sure thing, I forgot I was posting on a programmer's board haha. — byteGeist
– byteGeist, Commented Mar 9, 2016 at 2:39

Prashant · Accepted Answer · 2016-03-08 21:58:16Z

3

Do you have some kind of router in place in your Angular app? When you change the location href, is it actually causing full page reload?

Services are held in memory and therefore will not maintain state across page reloads.

answered Mar 8, 2016 at 21:58

Prashant

8,1503 gold badges27 silver badges25 bronze badges

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

2 Comments

byteGeist Over a year ago

yes it does refresh the page, this must be the problem. Is there a better way to change pages and not refresh? Perhaps $route?

Prashant Over a year ago

@user5874570 yes, look into ngRoute or uiRouter

Valerio Vaudi · Accepted Answer · 2016-03-08 22:33:54Z

0

I consider that the expression ['$scope', '$window', 'itemData', function ($scope, $window, itemData) force to initialize the dependency injection and for this reason you had two different object.

if you see the doc https://docs.angularjs.org/guide/controller there is a section called Setting up the initial state of a $scope object in this section was described the case of scope but I consider that may be extended at the list of the service in the [...] even in the angular.module(moduleName,[...]) if the [....] are filled the functin return a new module and only for empty square bracket return the current module instance

I hop that this can help you

answered Mar 8, 2016 at 22:33

Valerio Vaudi

4,5622 gold badges29 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJS service object is not being updated across views/controllers

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related