Hello I just created a login page with Ionic using the ion-nav-view tag. That is in my index.html I have this tag which together with the .config enable me to change my templates with according to my specifications.
This is the body of the index.html:
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
This is part of the app.js:
.config(function($stateProvider, $urlRouterProvider) {
.state('login', {
url: '/login',
views: {
'': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
Here is the login.html:
<ion-view view-title="" name="login-view">
<ion-nav-bar ></ion-nav-bar>
<ion-content class="padding top-space">
<div class="item item-image padding borders">
<img ng-src="img/welcome.png">
</div>
<br/>
<br/>
<div class="list">
<label id="rounded" class="item item-input">
<span class="input-label"><span class="ion-email"></span> Email</span>
<input type="email" placeholder="example@go.cm" class="button-blanche" ng-model= "loginparam.email">
</label>
</div>
<div class="list">
<label id="rounded" class="item item-input">
<span class="input-label"><span class="ion-unlocked"></span> Password</span>
<input type="password" placeholder = "password"class="button-banche" ng-model= "loginparam.password">
</label>
</div>
<button class="button button-block button-verte" ng-click="login()">Login to GoJ</button>
<div class="padding">
<p>Not in GoJ? <a class="green-link" ng-click="signin()">Create an Account</a></p>
<p><a class="green-link" href="">Forgot Password?</a></p>
</div>
{{loginparam}}
</ion-content>
</ion-view>
From my understanding, the index.html redirects to the login.html page when the app is launched and the controller associated to this view is the login controller. So then if I bind data on the view using the ng-model directive on this template it is bound to the current scope which should be that of my LoginCtrl but yet to no availl.
.controller('LoginCtrl', function($scope, $state, $rootScope, $ionicModal) {
console.log("sCope " + $scope.loginparam);//undefined
console.log("root" + $rootScope.loginparam);//undefined
var param = {};
$scope.login =function(){
console.log("Checking rootscope " +$rootScope.loginparam);//undefined
console.log("Checking scope " +$scope.loginparam);//undefined
//call the login service with the login parameters from the login template
$state.go("tab.dash");
};
My console.log($scope.loginparam) is undefined in the LoginCtrl scope. Now I'm really confused. Can any one help me out?
Looks like you haven't defined $scope.loginparam inside your LoginCtrl.
Please add the following code in your LoginCtrl
$scope.loginparam = {
email: '',
password: ''
}