I'm building a project with ionic.
Here is my simple controller:
var app = angular.module('myApp', ['ionic']);
app.controller("loginController", ['$scope', function($scope){
$scope.userName = ""
$scope.password = ""
$scope.login = function(){
//some login things here
};
}]);
My HTML
<ion-content ng-controller="loginController">
<form class="list" ng-submit="login()">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-bind="userName">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-bind="password">
</label>
<button class="button button-block button-positive">
Login
</button>
</form>
</ion-content>
When i click to login button, Login
function is runing but i can't access to userName
and password
variables because meanwhile $scope
is undefined
You need to put ngModel
directives on input fields instead of ngBind
:
<input type="text" ng-model="userName">
Complete HTML code then will become:
<form class="list" ng-submit="login()">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="userName">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="password">
</label>
<button class="button button-block button-positive">Login</button>
</form>