AngularJS rootScope 在控制器中未定义

Question

我有一个简单的 AngularJS 应用程序，它有两个模板页面：login.html 和 content.html。我使用 ng-view 和路由将这些页面动态加载到 index.html.

效果很好。

这是我的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>

而且，这是我的 login.html：

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

这里是content.html:

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

而且，这是我的 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);
    }
})

一切正常，除了内容页面上 $rootScope.password 的值未定义。

因此，当我单击 Click Me! 按钮时，我希望获得我在登录页面中输入的密码值，但我得到的是 'undefined'、

注意：我尝试在 Whosebug 上搜索其他答案，但找不到我的问题的答案。

Answer 1

那是因为，在你的 login.html 中，你调用 doLogin 时没有任何参数：

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

但是，您的函数需要一个参数：

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

因此，您的 $rootScope 的 password 属性将保持未定义状态。在您的 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>

我在您的密码输入上添加了一个 ng-model 属性，它将输入值绑定到一个名为 password 的范围变量。单击后，此变量将传递给 doLogin。

Answer 2

您没有在 doLogin() 函数中传递密码变量

试试这样： 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>

在控制器中

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

Answer 3

这样试试：

.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);
    }
})

不要输入“--->”，哈哈。只是为了展示这个地方。

在你的html中：

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

AngularJS rootScope 在控制器中未定义

AngularJS rootScope undefined in controller

javascript

angularjs

angularjs-rootscope