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>

does it make any difference? am not sure. I have done it same way before and has worked each time — Harshvardhan Solanki, Mar 18 '16 at 04:51
Hey thnx it just worked, displaying the angularjs user object. But how do I extract just one property from that complete object? and can you please explain why NOT to use `$scope` in html? thnx — Harshvardhan Solanki, Mar 18 '16 at 04:53
@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, Mar 18 '16 at 05:10
@Minato thnx a lot. One more question please. The angular object contains an array by name `data` which is containing the JSON data. How can I extract only one property from that `data`? I tried this `ng-repeat="author in user.data"` and it returns the two JSON objects stored in `data` — Harshvardhan Solanki, Mar 18 '16 at 05:25
@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, Mar 18 '16 at 05:31

score 0 · Accepted Answer · answered Mar 18 '16 at 05:12

0

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

answered Mar 18 '16 at 05:12

Minato

4,383
1
22
28

score 0 · Answer 2 · answered Apr 27 '17 at 05:04

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 '17 at 05:04

SAN

326
6
23

AngularJS $rootScope not accessible in html page

2 Answers2