AngularJS $rootScope not accessible in html page

Question

I have looked for the solution in following two links:

how-to-access-rootscope-value-defined-in-one-module-into-another-module

rootscope-variable-exists-but-not-accessible

But still could not find a solution.

I initialize $rootScope.user variable in $scope.login function, which is triggered by some other button click event, of my controller as:

app.controller('LoginFormController',['$rootScope','$location','$log','$scope','userAngService','userBean',function($rootScope,$location,$log,$scope,userAngService,userBean){
    $scope.login = function(val){
        $scope.user = userAngService.login(val).then(function(data){
            $rootScope.user = data;
            $location.path("/home");
        });
    };
 }]);

Redirecting it to /home mapped in app.js as:

    angular.module('Writer', ['AllControllers','ngRoute'])
.config(['$routeProvider', function($routeProvider,$Log){
    $routeProvider.when('/Diary',{
        templateUrl:'login.html',
        controller: 'LoginFormController'
    })
    .when('/home',{
        templateUrl: 'home.html',
        controller: 'ReachController'
     })
    .otherwise({redirectTo : '/Diary'});
}]);

Now I am accessing $rootScope.user variable in the mapped controller ReachController as:

app.controller('ReachController',['$scope','$rootScope',function($scope,$rootScope){
    $scope.user = {};
    $scope.user = $rootScope.user;
    console.log($scope.user);
}]);

It is perfectly logging angular object in console but is not avaiable in my home.html page. Here is the html page - accessing it in <h2> and <h3> tags:

    <div>
        <h2>{{$scope.user}}hhhello</h2>
        <h3>{{$scope.user.author}}</h3>
        <div id="welcomeStory">
            <span id="wsTitleBub">Title</span>
            <input id="wsTitle" type="text" ng-model="wsPublish.welcomeStoryTitle" />{{wsPublish.welcomeStoryTitle}}
            <h6>Words..</h6>
            <textarea id="wsWords" ng-model="wsPublish.welcomeStoryWords"></textarea>
            <input id="wsPublish" type="button" name="wsPublish" value="Publish" ng-click="pub = !pub" />
            <input id="wsAddShelf" type="button" name="wsAddToShelf" value="Add To Shelf" ng-click="addToShelf()" />
        </div>
        <div id="wsPublishTo" ng-show="pub">
            <ul>
                <li>
                    <input type=submit id="wsgroups" value="Group" ng-click="publishGroup(wsPublish)" />
                </li>
                <li>
                    <button id="wsPublic" ng-click="public()">Public</button>
                </li>
            </ul>
        </div>
    </div>

@HarshvardhanSolanki You know javascript is a bit shy.. the local-scope``variables of a Function are always sort of private, unless you put them in the prototype of the functions by using prototype or this property of the Function. since $scope is such local variable you can't use it directly inside your view, since the view is only handed an instance of your controller function. — Minato
– Minato, Commented Mar 18, 2016 at 5:10
@HarshvardhanSolanki you can't do that directly. you'll have to access the property inside the ng-repeat block. like {{author.name}} in your mark up.. on a side note you can create a filter to map the array that property but that would be an overkill and I'll suggest you not to not to do that — Minato
– Minato, Commented Mar 18, 2016 at 5:31

Minato · Accepted Answer · 2016-03-18 05:12:36Z

0

Just change your $scope.user to user in your markup and it'll work.

answered Mar 18, 2016 at 5:12

Minato

4,5431 gold badge25 silver badges30 bronze badges

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

Comments

SAN · Accepted Answer · 2017-04-27 05:04:54Z

0

Once it is in $rootScope you can directly access it in markup with {{user}} no need to again assign it to scope variable!

answered Apr 27, 2017 at 5:04

SAN

3261 gold badge6 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS $rootScope not accessible in html page

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related