javascript - 经过所有尝试后，ng-model 变量在 Controller 中保持未定义状态

Question

大家好! 我最近开始使用 ionic 和 Angular 并尝试编写一个登录表单。使用了一些教程，但我无法使其工作。

首先，我在 stackoverflow 上搜索了这个问题。其他主题包含在引用 ng-model 时使用点等建议。或者所描述的问题与我的有点不同 - 即使用电子邮件类型作为输入字段。 我在 login.html 中对 ng-model 的引用中有一个点(user.username、user.password):

<ion-view view-title="Enter username" name="login-view">
<ion-content class="padding">
    <div class="list list-inset">
        <label class="item item-input">
            <input type="text" placeholder="username" 
            ng-model="user.username" >
        </label>
        <label class="item item-input">
            <input type="password" placeholder="password" 
            ng-model="user.password">
        </label>          
    </div>
<button class="button button-block button-calm" 
ng-click="login()" ng-controller="LoginCtrl">Login</button>
</ion-content>

主index.html列出了所有使用的*.js。 在我的 app.js 中，我有

var quest = angular.module('quest', ['ionic', 'ngCordova']);

在controllers.js中我有

quest.controller('LoginCtrl', function($scope, $rootScope, LoginService, $ionicPlatform, $ionicPopup, $state){
$scope.user = {};   
$scope.login = function(){
    alert($scope.user.username + "\n" +
                $scope.user.password);
    LoginService.loginUser($scope.user.username,
                $scope.user.password).success(function(user) {
        alert("admin logged on");
    }).error(function(user) {
        var alertPopup = $ionicPopup.alert({
            title: 'Inrorrect login/password!',
            template: 'Invalid credentials!'
        });
    });
}
console.log("Logged on as '" + $scope.user.username + 
    "', using pswd '" + $scope.user.password);
});

我还使用服务来检查输入的凭据，但我不认为这是罪魁祸首。

Controller 在单击登录表单中的按钮后运行。紧接着，我收到了带有 undefined variable 的警报，并且它们也被记录为未定义。 我真的很困惑并且有点沮丧)。请大家帮忙! 也许我应该在所有其他文件中重新初始化我的模块？

提前致谢。

Answer 1

因为您仅将 Controller 绑定(bind)到按钮元素:

<button class="button button-block button-calm" 
ng-click="login()" ng-controller="LoginCtrl">Login</button>

您必须将 Controller 与您希望成为其范围一部分的所有代码周围的元素绑定(bind)在一起，如下所示:

<ion-view view-title="Enter username" name="login-view">
<ion-content class="padding">
    <div ng-controller="LoginCtrl"> <!-- Here -->
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" placeholder="username" 
                ng-model="user.username" >
            </label>
            <label class="item item-input">
                <input type="password" placeholder="password" 
                ng-model="user.password">
            </label>          
        </div>
        <button class="button button-block button-calm" 
        ng-click="login()">Login</button>
    </div>
</ion-content>