Lexx129 Lexx129 - 4 months ago 15
AngularJS Question

ng-model variable stays undefined in controller after all the tries

everybody!
I've started using ionic with angular recently and tried to write a login form. Used some tutorial, but I can't make it work.

To start with, I searched through stackoverflow for this issue. Other topics contain advises like using a dot, when referring to ng-model. Or problems described differ from mine a bit - i.e using e-mail type for input field.
My reference to ng-model in login.html has a dot in it (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>




Main index.html has all the used *.js listed.
In my app.js I have

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


and in controllers.js I have

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


I also use service to check entered credentials, but I don't think that it's to blame.

Controller runs after clicking the button in login form. Right after that I get an alert with undefined variables, and they get to log as undefined either.
I'm really stuck and a bit frustrated). Pls guyz, help!
Maybe should I reinitialize my module in every other file?

Thanks in advance.

Answer

Because you binded the controller only to the button element:

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

You must bind the controller with the element surrounding all the code that you want to be a part of it's scope like this:

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