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.password on 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.
3 answers
solution1
3 ACCPTED 2017-05-15 12:35:43
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.
solution2
0 2017-05-15 12:36:55
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');
}
})
solution3
0 2017-05-15 12:37:04
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.