Search code examples
javascriptangularjsangularjs-rootscope

AngularJS rootScope undefined in controller

I have a simple AngularJS app that has two template pages: login.html and content.html. I use ng-view and routing to dynamically load those pages into the index.html.

That works fine.

Here is my index.html: 

<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <title>Test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js"></script>
    <script src="app.js"></script>
</head>
<body>

    <h1>Test Page</h1>

    <div ng-view></div>

</body>
</html>

And, here is my login.html: 

<div>
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password">
    <button ng-click="doLogin()">Submit</button>
</div>

Here is content.html:

<div>
    <button ng-click="alertPassword()">Click Me!</button>
</div>

And, here is my app.js:

var app = angular.module('testApp', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(false);
    $routeProvider
    .when('/', {
        redirectTo: '/login'
    })
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'loginController'       
    })
    .when('/content', {
        templateUrl: 'content.html',
        controller: 'contentController'
    })
    .otherwise({
        redirectTo: '/'
    })
})
.controller('loginController', function($scope, $rootScope, $location){
    $scope.doLogin = function (password) {
        $rootScope.password = password;
        $location.path('/content');
    }
})
.controller('contentController', function($scope, $rootScope){
    var password = $rootScope.password;
    $scope.alertPassword = function () {
        alert(password);
    }
})

Everything works fine, except the value of $rootScope.passwordon the content page is undefined.

So, when I click on the Click Me! button I expect to get the value of the password I entered in the login page, however I get 'undefined',

Note: I tried searching trough other answers on stackoverflow, but couldn't find the answer to my problem.

Solution

  • That's because, in your login.html, you call doLogin without any parameter:

    <button ng-click="doLogin()">Submit</button>

    However, your function requires one parameter:

    $scope.doLogin = function (password) {
    $rootScope.password = password;
    $location.path('/content');
}

    Hence, the password property of your $rootScope will remain undefined. Try this in your login.html:

    <div>
    <input type="text" name="username" id="username">
    <input type="password" name="password" id="password" ng-model="password">
    <button ng-click="doLogin(password)">Submit</button>
</div>

    I added an ng-model attribute on your password input, which will tie the input value to a scope variable named password. This variable will then be passed to doLogin upon click.