Zach
March 16, 2014, 11:08pm
1
I’m writing a book about deploying AngularJS applications & have a mostly working mash up of the Angularfire-seed & Ionic Framework that will server as an example for the readers to deploy. Everything works as the vanilla Angularfire-seed chat app, except that the login view’s use of the ng-cloak directive breaks the login form in the following ways.
Three elements utilize the ng-cloak directive ; the Create Account & Cancel buttons & the confirm pass input.
If I remove the ng-cloaks from aforementioned elements then the
createMode interaction works as intended but the form will not
submit (displaying the “please enter an email address” error).
If I leave the ng-cloaks on those 3 elements then the createMode
interaction fails & the “please enter email address” error is thrown
again.
There are no error in the DevTools console for any of the mentioned issues & all necessary dependencies are in place (according to Batarang ). I attempted removing all of the Ionic view code & returned the login view to the seed version & the everything works as intended…except that I need this to work within Ionic.
I found the gist for module.simpleLoginTools & am wondering if the mentioned change to ng-cloak is causing this issue when used within the Ionic Framework?
My code can be accessed on GitHub & a deployed example can be accessed @ http://zachariahmoreno.com/portfolio/krakn/#/krakn/home
Thank You Kindly In Advance,
Zachariah
I’m looking through the code right now. I am taking a GUESS here, but I think the problem is your lack of “dot notation”.
Ionic quite frequently creates child scopes or isolate scopes. So primitives in your controller will not get 2 way binding.
Try the following :
.controller('LoginCtrl', ['$scope', 'loginService', '$location', function($scope, loginService, $location) {
$scope.data = {
"email" : null,
"pass" : null,
"confirm" : null,
"createMode" : false
}
$scope.login = function(cb) {
$scope.err = null;
if( !$scope.data.email ) {
$scope.err = 'Please enter an email address';
}
else if( !$scope.data.pass ) {
$scope.err = 'Please enter a password';
}
else {
loginService.login($scope.data.email, $scope.data.pass, function(err, user) {
$scope.err = err? err + '' : null;
if( !err ) {
cb && cb(user);
}
});
}
};
and
email
<label class="item item-input item-stacked-label">
<span class="input-label">password</span>
<input type="password" placeholder="embody strength" ng-model="data.pass" />
</label>
<label class="item item-input item-stacked-label" ng-show="createMode">
<span class="input-label">confirm pass</span>
<input type="password" placeholder="embody strength" ng-model="data.confirm" />
</label>
<div class="row">
<div class="col col-50">
<button class="button button-block button-positive" ng-click="login()" ng-hide="createMode">Log In</button>
</div> <!-- end .col-50 -->
<div class="col col-50">
<button class="button button-block button-calm" ng-click="createMode = true" ng-hide="createMode">Register</button>
</div> <!-- end .col-50 -->
</div> <!-- end .row -->
<div class="row">
<div class="col col-50">
<button class="button button-block button-calm" ng-show="createMode" ng-click="createAccount()">Create Account</button>
</div> <!-- end .col-50 -->
<div class="col col-50">
<button class="button button-block button-assertive" ng-show="createMode" ng-click="createMode = false">Cancel</button>
</div> <!-- end .col-50 -->
</div> <!-- end .row -->
<div class="row">
<div class="col">
<p ng-show="err" class="assertive text-center">{{err}}</p>
</div> <!-- end .col -->
</div> <!-- end .row -->
</form>
</div> <!-- end .list -->
</ion-content>
<!-- WORKING OUTSIDE OF IONIC
<form>
<label>
<span>email</span>
<input type="text" ng-model="data.email" />
</label>
<label>
<span>password</span>
<input type="password" ng-model="data.pass" />
</label>
<label ng-cloak ng-show="data.createMode">
<span>confirm pass</span>
<input type="password" ng-model="data.confirm" />
</label>
<button ng-click="login()" ng-hide="data.createMode">Log In</button>
<button ng-click="data.createMode = true" ng-hide="createMode">Register</button>
<button ng-cloak ng-show="data.createMode" ng-click="createAccount()">Create Account</button>
<button ng-cloak ng-show="data.createMode" ng-click="data.createMode = false">Cancel</button>
<p ng-show="err" class="error">{{err}}</p>
</form>
-->
Zach
March 17, 2014, 7:07pm
3
Thank You soo much for your explanation @Calendee !
Works as intended.