AngularJS rootScope undefined in controller

Question

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.

In controller, doLogin(password) you given as a parameter for password. from login.html you didn't pass the model value to the function parameter. — abhilash-ram
– abhilash-ram, Commented May 15, 2017 at 12:35

SinDeus · Accepted Answer · 2017-05-15 12:35:43Z

3

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.

answered May 15, 2017 at 12:35

SinDeus

5151 gold badge6 silver badges22 bronze badges

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

Comments

tomek550 · Accepted Answer · 2017-05-15 12:36:55Z

0

You not passing password variable in doLogin() function

try like this: HTML

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

In controller

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

answered May 15, 2017 at 12:36

tomek550

4704 silver badges15 bronze badges

Comments

therebelcoder · Accepted Answer · 2017-05-15 12:37:04Z

0

Try it like this:

.controller('loginController', function($scope, $rootScope, $location){
    var password = $rootScope.password; ///// <---
    $scope.doLogin = function (password) {
        $rootScope.password = password;
        $location.path('/content');
    }
})
.controller('contentController', function($scope, $rootScope){
    var password = $rootScope.password;
    $scope.alertPassword = function ( ---> password  ) {
        alert(password);
    }
})

Don't type '--->', lol. Just to show the place.

And in your html:

"doLogin(password)" // <--- add password as a parameter.

answered May 15, 2017 at 12:37

therebelcoder

1,02814 silver badges28 bronze badges

1 Comment

therebelcoder Over a year ago

Just to clarify. This should solve your current problem... But passing the $rootScope along like this, isn't the best practice. But I assume you're just fiddling.

Collectives™ on Stack Overflow

AngularJS rootScope undefined in controller

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related