Angularjs - set view object from $rootscope

Question

My angularjs webapp contains Login view and Home view.

After logging in, I want my credentials to be saved in order to use them in the future.

For this I saved them in my $rootScope.

Now in my homeController I set them to my $scope this way:

$scope.user = $rootScope.user;
$scope.password = $rootScope.password;

and in my HomeController, the value is properly passed.

When I try to set the value of $scope.user to my DOM using {{using}}, it doesnt seem to work.

Here is the HomeController

'use strict';

angular.module('Home')

.controller('HomeController', ['$scope', '$rootScope',

    function ($scope, $rootScope) {    
        $scope.user = $rootScope.username;
    }]);

and here is my home view:

<div ng-controller="HomeController as HomeCtrl">
    <h1></h1>
    <p>{{user}}</p>

    <p><a href="#/login">Logout</a></p>
</div>

What am I doing wrong? Sorry for the nooby question and feel free to add more info on how to manage such scenario.

You don't need to `$scope.user = $rootScope.user`. Since `$scope` is a child of `$rootScope`, by inheritance the `user` variable is automatically available in all your `$scope`s. — Jeremy Thille, Jan 08 '16 at 15:56
I suggest saving the login data in a service component instead of the scope. So you can inject them everywhere you need them. Look here for an example http://stackoverflow.com/questions/13882077/angularjs-passing-scope-between-routes — dec, Jan 08 '16 at 15:56
There is no need to copy the values from $rootScope to local $scope, you can just use them in your html sinde $scope's inherit from parent $scope. — Joel Kornbluh, Jan 08 '16 at 15:58
I disagree. It's better to call $rootScope, because nothing guarantees you that there will never be another variable named "user" for example, between your scope and the $rootScope. — RaidenF, Jan 08 '16 at 16:01
Also, {{ }} does not set a value to the DOM, it tells angular, to evaluate the expression inside {{ }}, in the current scope, and replace {{ }} with the result (thus it does much more than place a value). Don't mind it too much, just trying to clarify. — RaidenF, Jan 08 '16 at 16:04

RaidenF · Accepted Answer · 2016-01-12T09:20:38.973

0

Try <p>{{HomeCtrl.user}}</p>.

You are using an alias for your controller, and as shown in the documentation, you need to include that alias to reference its scope.

Edit: Since this was accepted, I'll link the related plunkr from the chat.

edited Jan 12 '16 at 09:20

answered Jan 08 '16 at 15:57

RaidenF

3,411
4
26
42

True that, @eeadev why are you using an alias for your controller? – Jeremy Thille Jan 08 '16 at 15:58
1

It's not a "bad" idea per se, it's not necessary here though (and it may confuse you). – RaidenF Jan 08 '16 at 15:59
@JeremyThille, actually for no reason at the moment – eeadev Jan 08 '16 at 16:08
@K.Gkinis, thanks but it still does not change my view – eeadev Jan 08 '16 at 16:09
Can you give me a plunker/fiddler whatever? – RaidenF Jan 08 '16 at 16:10
1

Also, do you have any tool to inspect angular scopes? Like batarang (for chrome)? – RaidenF Jan 08 '16 at 16:11
thanks @K.Gkinis; no, I dont use batarang. Here is a fiddler with app.js: https://jsfiddle.net/9nokLbhz/1/ and the other relevant files are wrote in this post. Is it possible to add more windows to fiddler? – eeadev Jan 08 '16 at 16:48
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100170/discussion-between-eeadev-and-k-gkinis). – eeadev Jan 08 '16 at 16:58

Angularjs - set view object from $rootscope

1 Answers1