AngularJS的ng-model不起作用

AngularJS ng-model not working?

本文关键字：不起作用 ng-model AngularJS      更新时间：2023-09-26

我有这个index.html，它在我的单页应用程序的所有页面上都有一个导航栏。导航栏容器div使用的是ng-controller="LoginCtrl"值，所以我还将在我的angular应用程序(app.js)中包含该控制器

由于某种原因，当通过ng-click指令调用doLogin()时，通过ng-model绑定的变量username和password显示为未定义?这是在我将值输入到绑定到控制器变量的文本框之后。

index . html 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
    <base href="/">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
    <div ng-controller="LoginCtrl">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">TriviaAttack!</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <form ng-if="!loggedIn" id="loginForm" class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" placeholder="Email" class="form-control" ng-model="username">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="Password" class="form-control" ng-model="password">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
                        </div>                  
                    </form>
                </div>
            </div>
        </nav>
        <div ng-view></div>
    </div>
    <script src="./app/app.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</body>
</html>

app.js 

...
myApp.controller('LoginCtrl', function($rootScope, $location, AuthService, AuthToken) {
    $rootScope.doLogin = function() {
        console.log($rootScope.username);
        console.log($rootScope.password);
    }
});
...

当您输入文本字段时，将在该ng-controller的作用域上创建inputModel原语属性。输入模型是在当前作用域中生成的，而不是在rootScope中生成的。

var app = angular.module('myApp', []);
app.controller('LoginCtrl', function($scope, $http) {
  $scope.doLogin = function() {
        console.log($scope.username);
        console.log($scope.password);
    }
});

在Plunker上查看

使用模型而不是原始类型

您应该使用$rootScope.user.name (ng-model将是user.name)而不是使用$rootScope.username和$rootScope.user.password (ng-model将是user.password)而不是$rootScope.password

这个问题实际上发生在javascript的原型模型中。如果你想知道它在angularjs中的适用性，你可以阅读这篇文章。这肯定会有帮助:)

编辑:当你遇到问题使代码工作时，我已经制作了你的代码的工作副本。请看一下:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="stylesheet.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
    <base href="/">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
    <div ng-controller="LoginCtrl">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">TriviaAttack!</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <form ng-if="!loggedIn" id="loginForm" class="navbar-form navbar-right">
                        <div class="form-group">
                            <input type="text" placeholder="Email" class="form-control" ng-model="user.name">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="Password" class="form-control" ng-model="user.password">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div ng-view></div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller('LoginCtrl', function ($scope, $location) {
        $scope.user = { name: "", password: "" };
        $scope.doLogin = function () {
            console.log($scope.user.name);
            console.log($scope.user.password);
        }
    });
</script>

使用$scope代替$rootScope来获取控制器中的ng-model

在经历了一些挫折之后，我找到了自己问题的答案。向我的doLogin()函数添加用户名和密码参数，然后使用指令ng-click="doLogin(user.name, user.pass)"按我想要的方式工作。不知道为什么它不像我尝试的那样工作，但是，哦，好吧。

相关文章：