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

ionic-v1
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.

  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

Thank You Kindly In Advance,
Zachariah

2

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>

 -->
3

Thank You soo much for your explanation @Calendee!
Works as intended.