Why sharing data across controllers doesn't work in AngularJS

Question

I am trying to build a simple username login system. This is just to record username which I can use in my various controllers.

But, for some reason, I am unable to get $scope.userName value in abcController

The essence of this problem is sharing data across controllers.

controller.js

app.controller('userNameController',function ($scope, $log, Config, Session)
{
  Session.updateSession($scope.userName);
});

app.controller('abcController',function ($scope, $log, Config, Session)
{
    $scope.userName=Session.data.username;
     //some other code
});

resource.js

app.factory('Session', function() {
    var Session = {
        data: {},
        updateSession: function(userName) {
            Session.data = { "username": userName }
        }
    };
    return Session;
});

As soon as a user clicks on LogIn button a twitter-bootstrap modal(popup) will appear and ask user to enter their username.

index.html

<div ng-controller="userNameController">
<button class="btn" id="enterUsernameBtn" href="#userNameModal" role="button" class="btn" data-toggle="modal" title="Enter Username">Login</button>
</div>

    <!-- UserName Modal -->
    <div id="userNameModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="userNameModalLabel"  aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="userNameModalLabel">Enter your username</h3>
        </div>
        <div class="modal-body">
            <p><b>UserId</b></p>
            <div class="input-append">
                <input class="pull-left" id="userIdTextBox" type="text" style="left:8px; width:160px" ng-controller="userNameController" ng-model="userName">
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Submit</button>
        </div>
    </div>

Please feel free to suggest, if there is better way to do what I am trying to do above.

Isn't this because your abcController has already run by the time your userNameController sets the userName property? Presumably $scope.userName === undefined in abcController. What happens if you use Session.data.username directly when you need it? You might need to attach the Session resource to your abcController $scope. — cirrus
– cirrus, Commented Jul 2, 2013 at 15:12
you may find this article interesting blog.jdriven.com/2013/03/… — vittore
– vittore, Commented Jul 2, 2013 at 15:25
@cirrus, you are right. That is what might be happening. I wrote app.run(function(Session) {}); //bootstrap session; in app.js which is referenced before any other .js files. That didn't help. Haven't I already attached the Session resource to abcController? Please help, angularJS noob here. — Watt
– Watt, Commented Jul 2, 2013 at 15:27
You could also use $rootScope but I think your resource approach is much better. — cirrus
– cirrus, Commented Jul 2, 2013 at 15:45

cirrus · Accepted Answer · 2013-07-02 21:18:32Z

3

Does it help if you define your resource like this?

app.factory('Session', function() {
     var Session = {
        data: { username: undefined }, // ensure object ref to attach to
        updateSession: function(userName) {
            Session.data.username = userName; // do NOT recreate the object above
        }
    };
    return Session;
});

I think what may be happening (and I can't see all of your code) but I don't think username is set when you take a reference in abcController. By defining a shared reference in your object schema first that abcController can attach to, it will reflect the changes later when updateSession() is called.

Here's a working example using your service idea.

edited Jul 2, 2013 at 21:18

answered Jul 2, 2013 at 15:14

cirrus

5,6908 gold badges46 silver badges62 bronze badges

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

9 Comments

Watt Over a year ago

I read somewhere, should writing app.run(function(Session) {}); //bootstrap session; in app.js will help?

Watt Over a year ago

btw, I defined my resource as you suggested, that didn't help.

cirrus Over a year ago

To be sure, console.log() in both controllers so you can see the order, and set username to an initial dummy value, say "xxxx". When you change the value you should see it reflected in abcController, but remember you need a '.' reference. If you change the underlying reference you'll break the link between the two. In your previous code you had REASSIGNED data completely, so abcController was binding to a DIFFERENT data{} object, not to mention an undefined username property.

Watt Over a year ago

I put console.log() in both controllers. In abcController initially username value is undefined. But if I put $scope.userName=Session.data.username; under a temp function which I call late on a temp button click, I can see username value getting propagated from userNameController, now I have to figure out, how to get current username so that in view I can do {{username}} from abcController. I tried putting $scope.$watch('Session.data.username', function(){$scope.username=Session.data.username}) in abcController, that didn't work.

cirrus Over a year ago

Got the service version working. jsfiddle.net/cWkP2/1 Note the '.' in data.username

|

Watt · Accepted Answer · 2013-07-02 19:39:56Z

0

I found an alternate solution using emit and broadcast. Full code example in this jsfiddle

app.js

app.run(function($rootScope) {
    /*
     Receive emitted message and broadcast it.
     Event names must be distinct or browser will blow up!
     */
    $rootScope.$on('handleEmit', function(event, args) {
        $rootScope.$broadcast('handleBroadcast', args);
    });
});

controller.js

app.controller('userNameController',function ($scope, $log, Config)
{

  $scope.submitUserName= function ()
  {
      // Session.updateSession($scope.userName);
      $scope.$emit('handleEmit', {username: $scope.userName});
  };

});

app.controller('abcController',function ($scope, $log, Config)
{
    $scope.$on('handleBroadcast', function(event, args) {
        $scope.userName = args.username;
      });
     //some other code
});

answered Jul 2, 2013 at 19:39

Watt

3,16414 gold badges58 silver badges89 bronze badges

1 Comment

cirrus Over a year ago

Actually, thinking again, this is probably what you'll have to do because your digest cycle won't run in the other controllers otherwise. So unless there's something to trigger a digest cycle in abcController when something happens in userNameController you won't see a change in userName even if you would see it if it looked. My suggestion will get userName propagated through your service OK, but you'd need some other mechanism to trigger the $digest for abcController.

Collectives™ on Stack Overflow

Why sharing data across controllers doesn't work in AngularJS

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related