Angularfire-seed + module.simpleLoginTools = ng-cloak issue in Ionic

Question

Hi & Thank You for Firebase, it's great.

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.

1. 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).
2. 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

Answer 1

So it turns out that the issue was not caused by simpleLoginTools at all, they work great. The issue was caused by Ionic's heavy use of isolate scopes that I was unaware of.

$scope.data = {
        "email"      : null,
        "pass"       : null,
        "confirm"    : null,
        "createMode" : false
}

The solution was to nest the login credentials inside of a $scope.data object, then modify the login function to fit the new nesting structure.

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