Question

我有这个index.html，其中有一个导航栏，可以在我的单页面应用程序的所有页面上看到。 navbars容器div使用ng-controller="LoginCtrl"值，因此我还将从我的角度应用程序中包含该控制器（app.js）

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

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

});
...

Answer 1

使用模型而不是使用原始类型。

您应该使用$rootScope.user.name（ng-model将user.name），而不是使用$rootScope.username和$rootScope.user.password（ng-model将{{1}而不是user.password

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

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

$rootScope.password

Answer 2

当您在文本字段中键入时，将在inputModel范围内创建ng-controller原始属性。输入模型是在当前范围内生成的，而不是rootScope。

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

在Plunker

上查看

Answer 3

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

Answer 4

经过一番挫折之后，我找到了自己问题的答案。在我的doLogin()函数中添加用户名和密码参数，然后使用指令ng-click="doLogin(user.name, user.pass)"按我的意愿工作。不知道为什么它不按照我的方式工作，但是很好。

AngularJS ng-model不起作用？

4 个答案: