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.

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

You could try commenting out the code in simpleLoginTools.js to see if the "mentioned change to ng-cloak" causes the issue. Also, have you checked to see if ionic does anything with ng-cloak? — Kato
Thank you @Kato! Turns out the issue was caused by Ionic creating isolate scopes that I was unaware of. simpleLoginTools now works great. — Zachariah Moreno

Zachariah Moreno Zachariah Moreno · Accepted Answer · 2014-04-04T22:06:14

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

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

1 Answers