AngularJS rootScope在控制器中未定義

Question

我有一個簡單的AngularJS應用程序，它有兩個模板頁面：login.html和content.html。 我使用ng-view和routing將這些頁面動態加載到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'，

注意：我嘗試在stackoverflow上搜索其他答案，但找不到我的問題的答案。

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在控制器中未定義

問題描述

3 個解決方案

解決方案1
3 已采納 2017-05-15 12:35:43

解決方案2
0 2017-05-15 12:36:55

解決方案3
0 2017-05-15 12:37:04

AngularJS rootScope在控制器中未定義

問題描述

3 個解決方案

解決方案1 3 已采納 2017-05-15 12:35:43

解決方案2 0 2017-05-15 12:36:55

解決方案3 0 2017-05-15 12:37:04

解決方案1
3 已采納 2017-05-15 12:35:43

解決方案2
0 2017-05-15 12:36:55

解決方案3
0 2017-05-15 12:37:04