CODEWITHSUNDEEP
javascriptangularjsangularfire
user1957054
user1957054

Reputation: 13

AngularFire $scope.auth is undefined in footer controller

I have two controllers a header and a footer controller. The header controller is based on the http://www.thinkster.io/pick/eHPCs7s87O/angularjs-tutorial-learn-to-rapidly-build-real-time-web-apps-with-firebase demo and deals with the user logging in/out.

In each controller I have the code:

$scope.findFavStore = function(){
    console.log("$scope.auth.id: " + $scope.auth.id);
}

unfortunately this function errors out for the footer controller: "TypeError: Cannot read property 'id' of undefined at Object.$scope.findFavStore"

Index.html snippet:

<header data-ng-include="'views/header.html'" class="navbar navbar-inverse navbar-fixed-top" role="navigation"></header>
<section class="content">
    <section class="container">
        <div ng-view></div>
    </section>
</section>
<footer data-ng-include="'views/footer.html'" class="navbar navbar-default navbar-fixed-bottom"></footer>

HeaderController:

    angular.module('fantasyApp.controllers.header', ['fantasyApp.services.login'])
.controller('HeaderController', ['$scope', '$location', 'loginService', 'angularFire', 'FBURL',
    function($scope, $location, loginService, angularFire, FBURL) {

        $scope.navbarEntries = [{
                "title": "Stores",
                "link": "/stores"
            }
        ];

        $scope.findFavStore = function(){
            console.log("$scope.auth.id: " + $scope.auth.id);
        }

        $scope.$on("angularFireAuth:login", function() {
            angularFire(new Firebase(FBURL+'/users/'+$scope.auth.id), $scope, 'user');
        });

        $scope.logout = function() {
            loginService.logout('/signin');
        };

        $scope.$on('$routeChangeSuccess', function() {
            $scope.navbarEntries.forEach(
                function(data) {
                    data.isActive = ($location.path().indexOf(data.link) == 0);
                }
            )
        })

    }])

FooterController:

    'use strict';

    angular.module('fantasyApp.controllers.footer', ['fantasyApp.services.login', 'fantasyApp.services.users', 'fantasyApp.services.stores'])
.controller('FooterController', ['$scope', 'Users', 'Stores', '$location', 'loginService', 'angularFire', 'FBURL',
    function($scope, Users, Stores, $location, loginService, angularFire, FBURL) {

        $scope.findFavStore = function(){
            console.log("$scope.auth.id: " + $scope.auth.id);
        }

    }])

What is the problem I am missing with the $scope variable?

Upvotes: 1

Views: 772

Answers (1)

Jonas
Jonas

Reputation: 1712

The $scope on each controller is different. Only child controllers inherit the $scope of the parent. But your header and footer controllers are siblings.

You need to use the $rootScope so you can access it from every controller:

First add it as a dependency

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

Then pass it to angularFire

$scope.$on("angularFireAuth:login", function() {
   angularFire(new Firebase(FBURL+'/users/'+$scope.auth.id), $rootScope, 'user');
});

And last, to make it clearer, add the $rootScope as dependency on the footer controller and access its auth property. (This may not be necessary given scope inheritance, but I would suggest it to prevent conflicts)

console.log($rootScope.auth.id);

Quoted from the link you posted:

angularFire() takes three parameters: the reference to the data that we want bound to the model, the $scope object we are binding to, and the stringified version of the model name we are binding to.

Passing the $rootScope as the second parameter we bind the auth data to the $rootScope object, which can then be accessed from any controller in your app.

Upvotes: 2

Related Questions