Question

大家好！我最近开始使用ionic with 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将运行。在那之后，我得到一个带有未定义变量的警报，并且它们也会以未定义的方式记录。我真的卡住了，有点沮丧）。请伙计，帮忙！也许我应该在每个其他文件中重新初始化我的模块？

提前致谢。

Answer 1

因为您只将控制器绑定到按钮元素：

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

您必须将控制器与您希望成为其一部分的所有代码周围的元素绑定，如下所示：

<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>

所有尝试后，ng-model变量在控制器中保持未定义

1 个答案: