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!按钮时，我希望得到我在登录页面输入的密码的值，但是我得到了未定义的＆＃39;，

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

Answer 1

这是因为，在您的login.html中，您在没有任何参数的情况下致电doLogin：

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

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

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

因此，password的{{1}}属性仍未定义。在$rootScope：

中试试这个

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。

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

不要输入＆＃39; ---＆gt;＆＃39;，lol。只是为了展示这个地方。

在你的HTML中：

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

AngularJS rootScope在控制器

3 个答案: